canvas的简单应用

2016-12-10

canvas元素

1、在页面中添加canvas元素：

1	<canvas id="myCanvas" width="200" height="100"></canvas>

2、canvas如何绘制图形：

var c=document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF00FF";
context.fillRect(50,25,100,50);

3、浏览器不支持canvas：

1
2
3

<canvas id="myCanvas" width="200" height="100">
	您的浏览器不支持canvas，请您升级或更换浏览器。
</canvas>

4、浏览器检测

var canvas = document.getElementById("myCanvas");
if(!canvas.getContext("2d")){
	alert("您的浏览器不支持canvas！");
}

canvas绘制简单图形

1、直线：

1
2
3

context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();

2、矩形：

1
2
3

//指定填充区域，绘制填充区域的矩形
context.fillStyle = "#FF00FF";
context.fillRect(0,0,200,100);

1
2
3

//指定轮廓线，绘制轮廓线
context.strokeStyle = "#FFFFFF";
context.strokeRect(0,0,100,50);

3、圆形：

//圆区域，填充颜色
context.fillStyle = "#FF00FF";
context.beginPath();
context.arc(100,75,50,0,Math.PI*2,true);
context.closePath();
context.fill();

//圆线
context.strokeStyle = "#FF00FF";
context.beginPath();
context.arc(100,75,50,0,Math.PI*2,true);
context.stroke();

4、三角形：

//三角形区域，填充颜色
context.fillStyle = "red";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.fill();

//三角形轮廓线
context.strokeStyle = "red";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.closePath();
context.stroke();

5、清空画布：

1	context.clearRect(x,y,width,height);

清除矩形区域内的所有图形，当x=0，y=0时，若width与height的值分别是画布的宽、高时，画布会被清空。
6、绘制贝塞尔曲线
quadraticCurveTo()方法可以绘制二次方贝塞尔曲线

1
2
3

context.quadraticCurveTo(cp1x,cp1y,x,y);
//(cp1x,cp1y)是控制点的坐标
//(x,y)是终点坐标

bezierCurveTo()方法可以绘制三次方贝塞尔曲线

context.bezierCureTo(cp1x,cp1y,cp2x,cp2y,x,y);
//(cp1x,cp1y)是第一个控制点的坐标
//(cp2x,cp2y)是第二个控制点的坐标
//(x,y)是终点坐标