用HTML5 Canvas可纯原生实现带实时指针动画的钟表：1. 创建canvas并获取2D上下文；2. 绘制静态表盘（外圆、60个刻度、12个数字）；3. 每帧用new Date()获取时间，计算时分秒针弧度角度；4. 清空画布后重绘表盘和三根指针；5. 用requestAnimationFrame驱动平滑循环。
用 HTML5 Canvas 制作带实时指针动画的钟表盘，核心是：获取当前时间、计算各指针角度、清空画布重绘、用 requestAnimationFrame 实现平滑更新。不需要第三方库，纯原生 JS 就能搞定。
1. 搭建基础 Canvas 结构
先在 HTML 中放一个 <canvas></canvas> 元素，并设置固定宽高（推荐正方形，如 400×400），再用 JS 获取上下文：
JS 中：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(centerX, centerY) - 20; // 留边
2. 绘制静态表盘（刻度 + 数字）
这部分只画一次，不随动画重绘。用 ctx.arc() 画外圆，循环绘制 60 个分钟刻度（每 6° 一个），其中整点（12、3、6、9）加粗或标数字：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 画表盘圆圈：
ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.stroke(); - 画分钟刻度：循环
i从 0 到 59，角度angle = (i * Math.PI * 2) / 60，内短线起点在radius * 0.9处，终点在radius处 - 画小时数字：只对
i % 5 === 0（即 0,5,10…55）的位置，换算成小时数（hour = i/5 || 12），用ctx.fillText()居中写数字
3. 计算并绘制动态指针
每次更新前，用 new Date() 获取当前时间，再分别算出时、分、秒针的角度（单位：弧度）：
- 秒针：每秒转 6° →
secAngle = (seconds * Math.PI * 2) / 60 - 分针：每分钟转 6°，还要加上秒针带动的偏移（
seconds/60分）→minAngle = ((minutes + seconds/60) * Math.PI * 2) / 60 - 时针：每小时转 30°，还要叠加分钟带动（
minutes/60小时）→hrAngle = (((hours % 12) + minutes/60) * Math.PI * 2) / 12
然后用 ctx.moveTo(centerX, centerY) + ctx.lineTo(x, y) 绘制指针线段，注意长度区分（秒针最长，时针最短），可加阴影或不同颜色增强层次。
4. 启动实时动画循环
不用 setInterval，改用 requestAnimationFrame 更流畅且省资源。关键点：
- 每次动画帧开始前，调用
ctx.clearRect(0, 0, canvas.width, canvas.height)清空画布 - 先重绘静态表盘（或只在首次绘制，后续跳过）
- 再根据最新时间计算并绘制三根指针
- 最后递归调用自身，形成循环
示例骨架：
function drawClock() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawDial(); // 静态部分（可优化为只执行一次）
const now = new Date();
const hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
drawHand(centerX, centerY, hrAngle, radius * 0.5, '#333', 8); // 时针
drawHand(centerX, centerY, minAngle, radius * 0.7, '#555', 6); // 分针
drawHand(centerX, centerY, secAngle, radius * 0.85, 'red', 2); // 秒针
requestAnimationFrame(drawClock);
}
drawClock(); // 启动
不复杂但容易忽略细节：角度要转弧度、坐标系 Y 轴向下、清画布必须在每次重绘开头、指针旋转中心始终是表盘中心。做好这几点，一个顺滑走时的 Canvas 钟表就完成了。
