canvas 高仿 Apple Watch 表盘

不知道大家童年时候有没有在手上画手表的经历，恰好最近在看 canvas ，于是就诞生了这个高仿表盘。

实现过程

我这里参照了 Apple Watch 中的这个表盘：

绘制表盘背景

<div class="wrap">
  <canvas id="canvas" width="400" height="400"></canvas>
</div>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    ctx.translate(200, 200); // 移动坐标系中心点
    // 绘制黑色底盘
    ctx.beginPath();
    ctx.moveTo(-100, -80);
    ctx.quadraticCurveTo(-100, -100, -80, -100);
    ctx.lineTo(80, -100);
    ctx.quadraticCurveTo(100, -100, 100, -80);
    ctx.lineTo(100, 80)
    ctx.quadraticCurveTo(100, 100, 80, 100);
    ctx.lineTo(-80, 100);
    ctx.quadraticCurveTo(-100, 100, -100, 80);
    ctx.closePath();
    ctx.fillStyle = 'black';
    ctx.fill();
</script>

• 这里用到了一个变换属性 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/