介绍下canvas相关的API

用于自己加强记忆防止遗忘，当然还可以回头再看。

ctx

var ctx = el.getContext('2d');

检查是否支持canvas

if(el.getContext){
    var ctx = el.getContext('2d');
}

矩形-绘制一个填充的矩形

ctx.fillRect(x,y,width,height);

矩形-绘制一个矩形的边框

ctx.strokeRect(x,y,width,height);

矩形-清楚矩形区域

ctx.clearRect(x,y,width,height);

路径

//1.创建起点
ctx.beginPath();
//2.移动到某点
ctx.moveTo(x,y);
//3.绘制一条线，从当前点，到目标点
ctx.lineTo(x,y);
//4.通过线条来绘制图形轮廓
ctx.stroke();
//5.填充路径的内容区域为实心
ctx.fill();//会自动闭合
//6.关闭路径
ctx.closePath()

圆弧

//以（x,y） 为原点，radius 为半径，从startAngle开始到endAngle结束，方向默认顺时针
ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);

//角度与弧度计算---,在arc中使用的是弧度，不是角度
radians=(Math.PI/180)*degrees

上色

//color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象，默认黑色
ctx.fillStyle='white';//填充白色
ctx.strokeStyle='blakc';//边框黑色