canvas 入门

绘制倒计时时钟

1 绘制一条线

//设置状态
context.moveTo(100,100) //起点
context.lineTo(700,700) //终点
//绘制
context.stroke() //使线呈现  stroke中文解析：划掉; 轻抚; 轻触; 敲击;

//我们可以用下面api绘制线条
context.moveTo();
context.lineTo();
//在定义多条路径要在相对应的线条加上
context.beginPath();
context.closePath();
//利用下面可以定义线条的宽度，颜色，填充颜色
context.lineWdith();
context.strokeStyle();
context.fillStyle();
//利用下面方法使得线条绘制出来，和填充颜色成功
context.stroke();
context.fill(); 

然后利用刚学的线条绘制个七巧板

2 绘制弧线

canvas 中的方法

context.arc(
    context,centery,radius,startingAngle,endingAngle,
    anticlockwise = false
    //圆心坐标x、圆心坐标y、半径值、弧度起始值、弧度结束值、顺逆时针（可选，默认flase 瞬时）
)

圆的起始状态和终点状态看图

屏幕快照 2016-11-30 下午11.57.13.png

示例