zsyjx0115

canvas绘制

2015-12-03
评论

canvas元素是HTML5中新增的元素。首次接触canvas绘制，记录下它的基本使用方法，为之后制作一些小动画打下基础。canvas使用js在网页上绘制图像，元素本身没有绘图能力，拥有多种绘制路径、多边形、弧形、圆形等的方法。

canvas画布初始化

html中需要添加

<canvas id="canvas">
	当前浏览器不支持Canvas，否则你看不到这句话。
</canvas>

js中进行绘制

var canvas = document.getElementbyId("canvas");
var context = canvas.getContext("2d");
//使用context进行画布中图形的绘制

也可在js中设置canvas画布的宽高

canvas.width = 1024;
canvas.height = 768;

若要判断浏览器是否支持canvas，则应这么写：

var canvas = document.getElementbyId("canvas");
if(canvas.getContext("2d")){
	var context = canvas.getContext("2d");
	//使用context进行画布中图形的绘制
}
else{
	alert("当前浏览器不支持Canvas！");
}

canvas绘制

### 绘制直线和多边形 坐标系以左上角为原点，向右为x轴正方向，向下为y轴的正方向

//设置绘制的状态
context.moveTo(100,100);//移动画笔位置
context.lineTo(700,700);//画线至（700，700）坐标点
context.lineWidth = 5;//宽度
context.strokeStyle = "#2ABF9E";//颜色
//开始绘制
context.stroke();

使用lineTo，只要坐标点收尾相接，便可绘制多边形。

若想给多边形进行着色，则需要使用context.fill()方法来绘制，使用context.fillStyle来设置填充色。可以同时使用stroke和fill来绘制。

//设置三角形
context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(700,100);
context.lineTo(100,100);
context.lineWidth = 5;//宽度
context.strokeStyle = "red";//颜色
//开始绘制
context.stroke();

//绘制直线
context.moveTo(100,100);
context.lineTo(700,700);
context.lineWidth = 5;//宽度
context.strokeStyle = "black";//颜色
//开始绘制
context.stroke();

若按照上述方式绘制，并不会得到一个红色的三角形和一条黑色的直线，而是一个黑色的三角形和一条黑色的直线。这是因为绘制三角形的设置在第二个stroke方法执行时依然有效，为了解决该问题，canvas也提供了方案，使用beginPath()开始路径，closePath()结束路径，如下：

context.beginPath();
context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(700,100);
context.lineTo(100,100);
context.closePath();

context.lineWidth = 5;//宽度
context.strokeStyle = "red";//颜色
context.stroke();

context.beginPath();
context.moveTo(100,100);
context.lineTo(700,700);
context.closePath();

context.lineWidth = 5;//宽度
context.strokeStyle = "black";//颜色
context.stroke();

若我们绘制的路线并不是闭合的（stroke），使用colsePath()会自动将路线闭合。若不想要闭合路径，则不使用closePath，直接使用beginPath开始新的路径即可。 若我们绘制的是实心的图形（fill），是否使用closePath对绘制结果都没有影响。

绘制弧线

context.arc(centerx, centery, radius, startingAngle, endingAngle, anticlockwise)

  • centerx,centery: 圆心坐标
  • radius: 半径
  • startingAngle,endingAngle: 开始结束的角度（右侧水平方向为0，默认顺时针方向绘制，故左侧水平方向为1*Math.PI）
  • anticlockwise: false顺时针（默认） ture逆时针

画布刷新

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

context.canvas.width context.canvas.height 先找到画笔所属的画布，然后获取其宽高。

Tags