canvas

我发现看自己的博客比查文档还快，所以就在这里写一下 canvas 基础的API。以及我自己封装的画笔，github地址

基础API

画线

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(20, 20);     //画笔移动到这个坐标开始画
ctx.lineTo(200, 100);   //画笔画到哪里
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;       //线粗细  
ctx.lineCap = 'round';    //线两端圆角，默认直角
ctx.stroke();           //画路径（线）

效果

画矩形

带描边的

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 100, 60)      //fillRect(起始x坐标，起始y坐标，宽，高)
ctx.strokeStyle = 'blue';
ctx.lineWidth = 10;         //描边粗细
ctx.lineJoin = 'round';     //圆角，默认直角
ctx.strokeRect(15, 15, 110, 70)    //受路径画法的影响，这里参数稍有不同

效果

画多边形

举例三角形

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(20, 20);
ctx.lineTo(200, 100);
ctx.lineTo(60, 100);
ctx.closePath();    //关闭路径
// ctx.stroke();    //画路径
ctx.fill();         //填充

效果

beginPath()

绘画时可以使用 beginPath() 开启一个新的状态，类似作用域。举例：

ctx.lineWidth = 10;
ctx.strokeStyle = 'red';
ctx.moveTo(100, 50);
ctx.lineTo(300, 50);
ctx.stroke();

ctx.strokeStyle = 'green';
ctx.moveTo(100, 100);
ctx.line