canvas 高仿 Apple Watch 表盘

— By BingqiChen

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

童年画手表

实现过程

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

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>

绘制日期和表盘刻度

绘制日期文字:

   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));
   }

绘制表盘指针

对指针的绘制,首先以原点为中心绘制一个圆,对延伸出来的指针思考了两种绘制方法:

指针示意图

第一种:以 Y轴左半边 为例,点 (-2, 0) 为起始点,以 cp1cp2 为控制点,(-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);

值得注意的一点是:我们在绘制完时针后,如果接下去直接计算角度绘制分针,上下文会以上次旋转的角度为基础,叠加旋转效果,所以绘制分针之前需要还原到初始坐标系,我用的是 saverestore 函数保存状态/还原状态。

分针、秒针计算绘制过程雷同不再赘述。

实现动画

实现动画过程只需要擦除已绘制的内容,再次绘制并重置变换效果即可,重绘使用 setIntervalrequestAnimationFrame 都可以:

   function draw() {
       ctx.resetTransform(); // 重新绘图前清除变换效果
       ctx.clearRect(0, 0, 400, 400); // 清除内容
       ...
       window.requestAnimationFrame(draw);
   }
   window.requestAnimationFrame(draw);

成果图

完整实现