不知道大家童年时候有没有在手上画手表的经历，恰好最近在看 canvas ，于是就诞生了这个高仿表盘。
实现过程
我这里参照了 Apple Watch 中的这个表盘：
绘制表盘背景
- 这里用到了一个变换属性
translate，跟css中的属性相似，把后面绘制过程中的坐标系进行了平移，方便计算； - 为了绘制圆角这里用了二次贝塞尔曲线，当然使用
ctx.arc圆弧也可以，如下示意图右上角的点 cp 就是该位置贝塞尔曲线的控制点。
绘制日期和表盘刻度
绘制日期文字：
const now = moment();
ctx.textAlign = 'left';
ctx.fillStyle = '#ce4c50';
ctx.font = '11px "Helvetica Neue"';
ctx.textBaseline = 'middle';
ctx.fillText(now.format('D'), 15, 0);
ctx.fillStyle = 'white';
ctx.fillText(now.format('ddd'), 33, 0);绘制刻度：
ctx.fillStyle = 'white';
ctx.font = '20px "Helvetica Neue"';
ctx.strokeStyle = 'white';
ctx.textAlign = 'center';
// 绘制圆盘刻度点和数字
for (let index = 60; index > 0; index -= 1) {
if (index % 5 === 0) {
ctx.lineWidth = 3
ctx.fillText(index / 5, 0, -70);
} else {
ctx.lineWidth = 1;
}
ctx.beginPath();
ctx.moveTo(0, -90);
ctx.lineTo(0, -85);
ctx.stroke();
ctx.rotate(- Math.PI * 2 * (1 / 60));
}- 这里用到了
rotate属性，即绕中心点旋转，需要刻画 60 个刻度，一周的弧度为 2 Math.PI ，每次旋转 1 / 60 ，每 5* 格添加小时文字并加粗刻度线； - 这里还有个小时文字角度的问题没有找到好的解决方法。
绘制表盘指针
对指针的绘制，首先以原点为中心绘制一个圆，对延伸出来的指针思考了两种绘制方法：
第一种：以 Y轴左半边 为例，点 （-2, 0） 为起始点，以 cp1 、cp2 为控制点，（-1, -12） 为终点绘制三次贝塞尔曲线；
第二种：以 Y轴右半边 为例，直接从点 （1, -1） 绘制直线到 （1, -12） 。
// 时针
const hour = new Path2D();
hour.arc(0, 0, 2, 0, Math.PI * 2);
// hour.moveTo(-2, 0);
// hour.bezierCurveTo(-2, -2, 0, -1, -1, -12);
hour.moveTo(-1, -1);
hour.lineTo(-1, -12)
hour.lineTo(-2, -13);
hour.lineTo(-2, -45);
hour.arc(0, -47, 2, -Math.PI, 0);
hour.lineTo(2, -13);
// hour.lineTo(1, -12);
// hour.bezierCurveTo(0, 1, 2, -2, 2, 0);
hour.lineTo(1, -12);
hour.lineTo(1, -1);我把两种都实现了一遍发现效果都差不多，大概是我绘制的图形不够大，看不出区别。
接下去需要把指针指向对应的时间，以 16点20分 为例，我们计算时针需要旋转的角度：
const h = 16 % 12; // 表盘上只有12大格
const m = 20;
const hAngle = h / 12; // 这里只计算旋转角度占一圈的比例，每小时 1/12
const mAngle = (m / 60) * (1 / 12); // 不满1小时的部分，还需要乘上分钟数在1小时中的比例
const angle = Math.PI * 2 * (hAngle + mAngle); // 最终需要旋转的角度
ctx.rotate(angle);
ctx.fill(hour);
ctx.stroke(hour);
接下去在描述分针的时候我们发现只是末端部分稍微长一点，我们可以选择沿用时针的部分代码，写成这样：
// 分针
const minute = new Path2D(hour); // 沿用代码
minute.moveTo(-2, -45);
minute.lineTo(-2, -82);
minute.arc(0, -84, 2, -Math.PI, 0);
minute.lineTo(2, -13);
const minute = new Path2D(); // 不沿用代码
minute.arc(0, 0, 2, 0, Math.PI * 2);
minute.moveTo(-1, -1);
minute.lineTo(-1, -12)
minute.lineTo(-2, -13);
minute.lineTo(-2, -82);
minute.arc(0, -84, 2, -Math.PI, 0);
minute.lineTo(2, -13);
minute.lineTo(1, -12);
minute.lineTo(1, -1);值得注意的一点是：我们在绘制完时针后，如果接下去直接计算角度绘制分针，上下文会以上次旋转的角度为基础，叠加旋转效果，所以绘制分针之前需要还原到初始坐标系，我用的是 save 、 restore 函数保存状态/还原状态。
分针、秒针计算绘制过程雷同不再赘述。
实现动画
实现动画过程只需要擦除已绘制的内容，再次绘制并重置变换效果即可，重绘使用 setInterval 、 requestAnimationFrame 都可以：
function draw() {
ctx.resetTransform(); // 重新绘图前清除变换效果
ctx.clearRect(0, 0, 400, 400); // 清除内容
...
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
完整实现
详见jsfiddle
该文章首发于我的博客https://blog.bingqichen.me/