canvas1

canvas介绍

是HTML5重要元素，不需要外部插件支持，提供了强大的图形处理功能，常用于移动端web的开发。

基本图形绘制

1.绘制直线

1.context.beginPath() 开始绘制
2.context.moveTo(0,0) 设置起点
3.context.lineTo(100,100) 设置下一个点
4.context.closePath() 结束绘制
5.context.stroke() 描边绘制

2.绘制矩形

1.context.strokeRect(x,y,width,height)
2.context.fillRect(x,y,width,height)

3.绘制弧线

1.context.arc(x,y,radius,starAngle,endAngle,anticlockwise);
2.context.strokeStyle = “red”
3.context.stroke();
4.context.fillStyle = “green”;
5.context.fill();

4.绘制文字

1.context.font = “italic 50px Zapfino”; 设置字体
2.var gradient = context.createLinearGradient(x1,y1,x2,y2); 渐变范围从(x1,y1)到(x2,y2)
3.gradient.addColorStop(“0”,“blue”) 添加渐变色

图形变换

1.平移 context.translate(x,y)
2.旋转 context.rotate(Math.PI/2)
3.缩放 context.scale(x1,y1)

阴影设置

1.context.shadowOffsetX = 2;
2.context.shadowOffsetY = -2;
3.context.shadowColor = “yellow”;
4.context.shadowBlur = 50;

贝塞尔曲线路径

1.二次贝塞尔 context.quadraticCurveTo(dx,dy,x,y)
2.三次贝塞尔 context.bezierCurveTo(500,0,0,500,500,500)