canvas绘制四分之一圆_如何用canvas画时钟（一步步详解附带源代码）？

canvas绘图

该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。

绘制路径

要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。

按照上图，就能画出圆，半圆，，四分之一圆等等。

开始画图

1.先设置一块画布。

2.画一个圆，并将圆心坐标重新设为（0，0）

3.在钟面上标上时间和刻度

4.开始画时针

5.画分针

6.画秒针，秒针的画法和分针基本上一样

7.在圆心画一个圆点，用来装饰

8.让指针转动

完整代码

相比太极图，时针难度的确是加大了不少。大家也可以继续在时钟的基础上加上更多的东西，让这个时钟变得更加美观。

希望大家在阅读完之后，有更简单的绘制方法，请在评论区留言，谢谢。

————————————————

版权声明：本文为CSDN博主「丶帆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：

CSDN-专业IT技术社区-登录​blog.csdn.net