html5 怎么绘时钟_html5用Canvas画表盘指针JS更新时间绘动态时钟【绘制】

要实现HTML5 Canvas动态模拟时钟，需依次完成：一、创建canvas并获取2D上下文；二、绘制静态表盘（圆环、刻度、数字）；三、根据实时时间计算时分秒指针弧度；四、用save/restore隔离旋转绘制指针；五、用requestAnimationFrame平滑驱动动画循环。

如果您希望使用 HTML5 Canvas 绘制一个动态更新的模拟时钟，需要结合 Canvas 的绘图 API 与 JavaScript 实时获取并渲染时、分、秒指针。以下是实现该功能的具体步骤：

一、创建 Canvas 元素并获取上下文

Canvas 是 HTML5 提供的位图画布，所有图形绘制必须通过其 2D 渲染上下文完成。需确保 DOM 加载完成后获取 canvas 对象及其 context，否则绘图操作将无效。

1、在 HTML 中插入 <canvas id="clock"></canvas> 标签，并设置固定宽高（如 width="400" height="400"）。

2、使用 document.getElementById("clock") 获取 canvas 元素。

立即学习“前端免费学习笔记（深入）”；

3、调用 canvas.getContext("2d") 获取 2D 绘图上下文对象，后续所有绘制均依赖此对象。

二、绘制静态表盘（圆环、刻度、数字）

表盘是时钟的基础背景，需一次性绘制完成，不随时间变化。包括外圆轮廓、12 个小时刻度线及对应数字标识，所有元素以画布中心为原点进行坐标计算。

1、将绘图原点平移到画布中心：调用 ctx.translate(centerX, centerY)，其中 centerX = canvas.width / 2，centerY = canvas.height / 2。

2、绘制表盘外圆：使用 ctx.beginPath()、ctx.arc(0, 0, radius, 0, Math.PI * 2)、ctx.stroke()，radius 取 180。

3、绘制 60 分刻度：循环 60 次，每 6° 旋转一次，对每第 5 个刻度（即整点位置）绘制稍长的线段，并在对应位置用 ctx.fillText() 写入 1–12 数字。

三、计算指针角度并绘制时针、分针、秒针

指针角度由当前时间决定，需将小时、分钟、秒分别转换为弧度值。时针受分和秒影响，需叠加偏移；分针受秒影响；秒针最敏感，直接映射到 60 秒周期。

1、获取当前时间：使用 new Date() 获取 getHours()、getMinutes()、getSeconds() 值。

2、计算秒针弧度： secondAngle = (seconds / 60) * Math.PI * 2 - Math.PI / 2（减去 90° 使起始方向朝上）。

标签： javascript java html js html5 浏览器 win 重绘 canva