github链接：https://github.com/cyjsysu/ca...1.实现效果2.canvasHTMLcanvas的相关内容可以看这篇文章菜鸟教程。通过这篇文章主要学习了canvas的基础知识。这个小项目也参考了文章附带的参考代码。https://www.runoob.com/w3cnote/html5-canvas-intro.html三、代码分析3.1HTML部分使用canvas标签创建一个500*500的画布您的浏览器不支持canvas，请升级您的浏览器。3.2创建上下文对象varcanvas=document.getElementById('clock');varctx=canvas.getContext("2d");3.3画一个圆为了方便后续操作，这里先移动原点通过translate方法到画布的中心(250,250)。ctx.strokeStyle="黑色";ctx.translate(250,250);//从某坐标原点到原中心ctx.lineWidth=3;ctx.beginPath();ctx.arc(0,0,240,0,2*Math.PI);//绘制圆圈ctx.stroke();ctx.closePath();3.4绘制刻度我个人感觉这部分是整个项目中最复杂的部分，但也没有那么复杂。在这部分，我们不需要考虑斜线的相对坐标。这里所有刻度的延长线都经过原点(250,250)，所以我每画一个刻度，都会旋转x轴，使其与对应的刻度重合。这样，每次绘制刻度时，刻度的y坐标为0。由于每次都需要旋转坐标轴，所以每次操作前通过save()方法保存当前状态，状态信息为操作后由restore()恢复。for(leti=0;i<60;i++){//绘制刻度。ctx.save();ctx.rotate(-Math.PI/2+i*Math.PI/30);//旋转坐标轴。ctx.beginPath();varstartX=i%5?210:200;ctx.moveTo(startX,0);ctx.lineTo(230,0);ctx.lineWidth=i%5?2:4;ctx.stroke();ctx.closePath();ctx.restore();}3.5绘制指针其实就到这里了，要用到的canvas知识和之前基本一样。绘制指针的基本思路是通过系统当前时间来计算每根指针的角度。然后将坐标轴旋转到相应的角度，最后画一条直线。在这里，为了更好看，通过设置ctx.lineCap="round"将指针的末尾圆角化。
