canvas|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 瞬时) )

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

canvas|canvas 入门
文章图片
屏幕快照 2016-11-30 下午11.57.13.png
【canvas|canvas 入门】示例
圆弧示例

    推荐阅读