绘制倒计时时钟
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
【canvas|canvas 入门】示例
圆弧示例 - 锐客网