不知道大家童年时候有没有在手上画手表的经历,恰好最近在看 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>
  • 这里用到了一个变换属性 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) 为起始点,以 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);

成果图

完整实现