canvas 高仿 Apple Watch 表盘

摘要：绘制表盘指针对指针的绘制，首先以原点为中心绘制一个圆，对延伸出来的指针思考了两种绘制方法第一种以轴左半边为例，点为起始点，以为控制点，为终点绘制三次贝塞尔曲线第二种以轴右半边为例，直接从点绘制直线到。

不知道大家童年时候有没有在手上画手表的经历，恰好最近在看 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("ffffd"), 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/