Canvas实现实时时钟效果
canvas 的实时时钟效果，蛮适合想练练手的前端朋友。通过
HTML 部分只需要一个标签，样式用width和height控制大小，再加个边框就挺清爽：
canvas {
border: 1px solid #ccc;
display: block;
margin: 0 auto;
width: 300px;
height: 300px;
}JavaScript 这块，核心是定时器setInterval，每秒调用一次drawClock()，更新当前时间画图：
setInterval(drawClock, 1000);drawClock()主要干三件事：清画布、算角度、画圆盘和指针。角度换算那里注意用Math.PI转弧度，指针绘制也要配合ctx.save()和ctx.restore()，不然画布会乱。
代码整体还挺直观的，适合用来理解Canvas API的基本套路。如果你打算做点带动态效果的小工具，这个例子真的可以看看。
顺手附上几个不错的相关文章：
文件大小：1.69KB
评论区