在前端开发中，Canvas 是一个非常有用的工具，它可以让我们使用 JavaScript 在网页上绘制图形和动画。本文将介绍如何使用 Canvas 绘制一个时钟表盘，既能够显示当前时间，又能够自定义样式。
前置知识
在开始之前，你应该掌握以下知识：
- HTML 和 CSS 的基础知识
- JavaScript 的基础知识
- Canvas 的基本用法
如果你还不熟悉这些内容，可以先查看相关教程或手册。
准备工作
首先，我们需要在 HTML 中添加一个 Canvas 元素：
<canvas id="clock" width="200" height="200"></canvas>
然后，在 JavaScript 中获取这个元素，并获取它的 2D 上下文：
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');现在，我们就可以使用这个 2D 上下文来绘制图形了。
绘制时钟表盘
要绘制时钟表盘，我们首先需要绘制一个圆形，表示表盘的轮廓。可以使用 arc() 方法绘制一个圆形：
ctx.beginPath(); ctx.arc(100, 100, 90, 0, Math.PI * 2); ctx.stroke();
其中，arc() 方法接受五个参数：
- 圆心的 x 坐标
- 圆心的 y 坐标
- 圆的半径
- 起始角度（以弧度为单位）
- 结束角度（以弧度为单位）
这里我们将圆心设置为 (100, 100)，半径设置为 90，起始角度设置为 0，结束角度设置为 Math.PI * 2，表示一个完整的圆。
接下来，我们可以绘制表盘上的刻度和数字。可以使用 rotate() 和 translate() 方法来控制绘制位置和角度：
-- -------------------- ---- ------- --- ---- - - -- - -- --- ---- - ----------- ------------------ ----- ------------ - ------- - --- ---------------- ------------- ----- ------------- ----- ------------- -------- - ----- ------- ------------- - --------- --------------- -- ----- -------------- -
其中，save() 和 restore() 方法可以保存和恢复当前的绘图状态。translate() 方法用于平移坐标系，rotate() 方法用于旋转坐标系。这里我们将坐标系平移到圆心处，然后按照每个小时的角度旋转坐标系，并在适当位置绘制刻度和数字。
最终效果如下：
绘制指针
现在我们已经绘制了时钟表盘，接下来要绘制时、分、秒指针。可以使用 lineTo() 方法来绘制线段：
-- -------------------- ---- ------- -- -- ---------------- --------------- ----- -------------- - -- - ---------------------- --- - -- - ----------------------- ------------- -- -- ---------------- --------------- ----- -------------- - -- - ---------------------- --- - -- - ----------------------- ------------- -- -- ---------------- --------------- ----- -------------- - -- - -------------------- --- - -- - --------------------- -------------
其中，sin() 和 cos() 方法用于计算角度的正弦值和余弦值。这里我们将指针的长度分别设置为 60、50 和 40
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/845