一、概述
作用——利用HTML5中提供的画布功能,通过Canvas实现各种图形。
注意:js事件不能绑定到画布中的图形上,只能为<canvas>元素绑定事件。
二、画布的使用
1、html页面中使用<canvas>定义画布
2、使用js获取canvas元素,并调用getContext("2d")方法得到画布对象
3、使用画布提供的API方法绘制图形
4、绘制图形的方法
绘制矩形:
fillRect(x,y,width,height)--绘制实心矩形
x和y--矩形左上角的坐标值
width和height--矩形的宽与高
strokeRect(x,y,width,height)--绘制空心矩形
属性含义同上
clearRect(x,y,width,height)--清除制定矩形区域
属性含义同上
小案例:
<!DOCTYPE HTML>
<html>
<head>
<title>如何使用Canvas</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canv" style="background:red" width="400px" height="400px"></canvas>
</body>
<script>
var canvas=document.getElementById("canv");
var context=canvas.getContext("2d");
context.strokeRect(10,10,100,100);
context.fillRect(100,100,100,100);
context.clearRect(110,110,80,80);
</script>
</html>
绘制效果:
设置颜色:
fillStyle--设置填充颜色
strokeStyle--设置描边颜色
globalAlpha--设置透明度(0-1)
小案例:设置彩色矩形
<!DOCTYPE html>
<html>
<head>
<title>设置颜色</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canvas" width="500px" height="500px" style="background:silver"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 1 设置填充颜色
context.fillStyle = "blue";
// 2 绘制实心矩形
context.fillRect(10,10,100,100);
context.strokeStyle = "red";
context.strokeRect(120,10,100,100);
context.fillStyle = "red";
context.globalAlpha = 0.2;
context.fillRect(230,10,100,100);
</script>
</body>
</html>
绘制效果:
设置渐变
线性渐变:createLinearGradient(x1,y1,x2,y2)
x1,y1 - 基准线的起点坐标值
x2,y2 - 基准线的终点坐标值
线性渐变根据基准线实现渐变效果
扇形渐变:createRadialGradient(x1,y1,r1,x2,y2,r2);
x1和y1 - 第一个圆的圆心坐标值
r1 - 第一个圆的半径
x2和y2 - 第二个圆的圆心的坐标值
r2 - 第二个圆的半径
扇形渐变根据基准圆实现扇形渐变
设置渐变:addColorStop(position,color)
position - 设置颜色的位置(0-1)
color - 设置的颜色
注意:该方法由渐变对象调用,而不是画布对象调用
线性渐变小案例:
<!DOCTYPE HTML>
<html>
<head>
<title>线性渐变</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas width="500px" height="500px" id="canvas"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var grad=context.createLinearGradient(0,0,400,0);
//var grad=context.createLinearGradient(0,0,0,300);
//var grad=context.createLinearGradient(0,0,400,300);
grad.addColorStop(0,"blue");
grad.addColorStop(0.5,"green");
grad.addColorStop(1,"yellow");
context.fillStyle=grad;
context.fillRect(0,0,400,300);
</script>
</html>
三种运行效果分别为:
扇形渐变小案例:
<!DOCTYPE HTML>
<html>
<head>
<title>扇形渐变</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canvas" width="400px" height="300px"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var grad=context.createRadialGradient(200,0,100,200,300,100);
//var grad=context.createRadialGradient(0,0,30,200,300,100);
grad.addColorStop(0,"orange");
grad.addColorStop(1,"yellow");
context.fillStyle=grad;
context.fillRect(0,0,400,300);
</script>
</html>
两种运行效果分别为: