答案：使用HTML5 Canvas结合JavaScript绘制动态时钟，通过arc绘制表盘外圈，createRadialGradient实现渐变填充，for循环绘制12个刻度及数字，利用translate和rotate变换简化指针旋转逻辑，通过requestAnimationFrame实现每秒更新动画，配合save/restore保持坐标系状态，最终呈现一个带立体感渐变、平滑转动的模拟时钟。
用 HTML5 的 Canvas 绘制一个动态时钟，不仅能展示绘图能力，还能体现对动画和时间处理的理解。下面是一个完整的实现方案，结合了 Canvas 的高级绘图技巧，如路径绘制、变换、渐变与平滑动画。
1. 创建基础画布结构
在 HTML 中添加一个 canvas 元素，并设置宽高。通过 JavaScript 获取上下文进行绘图。
JavaScript 中获取绘图上下文：
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) - 10;
2. 绘制表盘：使用渐变与刻度
绘制一个带外圈、数字和刻度的表盘，提升视觉效果。
立即学习“前端免费学习笔记（深入）”；
function drawDial() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 外圈边框
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.lineWidth = 6;
ctx.strokeStyle = '#333';
ctx.stroke();
// 内部渐变填充
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
gradient.addColorStop(0, '#f0f0f0');
gradient.addColorStop(1, '#ccc');
ctx.fillStyle = gradient;
ctx.fill();
// 绘制刻度
for (let i = 0; i < 12; i++) {
const angle = (i * Math.PI / 6);
const isMajor = i % 3 === 0; // 每3个是大刻度（对应数字）
const startRadius = isMajor ? radius - 10 : radius - 5;
const endRadius = radius;
ctx.beginPath();
ctx.moveTo(
centerX + Math.cos(angle) * startRadius,
centerY + Math.sin(angle) * startRadius
);
ctx.lineTo(
centerX + Math.cos(angle) * endRadius,
centerY + Math.sin(angle) * endRadius
);
ctx.lineWidth = isMajor ? 3 : 2;
ctx.strokeStyle = '#000';
ctx.stroke();
// 添加数字
if (isMajor) {
const num = i === 0 ? 12 : i;
ctx.font = 'bold 18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(num,
centerX + Math.cos(angle) * (radius - 30),
centerY + Math.sin(angle) * (radius - 30)
);
}}
}
3. 绘制指针：利用坐标变换
使用 translate 和 rotate 简化指针旋转逻辑。
function drawHand(length, width, rotation) {
ctx.save();
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.translate(centerX, centerY);
ctx.rotate(rotation);
ctx.moveTo(0, 0);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.restore();
}
function drawClock() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 重绘表盘
drawDial();
// 计算角度（注意：Math.PI 0.5 是起始偏移，因为 0 度指向右，而时钟从上开始）
const secAngle = seconds (Math.PI / 30) - Math.PI / 2;
const minAngle = (minutes + seconds / 60) (Math.PI / 30) - Math.PI / 2;
const hourAngle = (hours + minutes / 60) (Math.PI / 6) - Math.PI / 2;
// 绘制指针
drawHand(radius 0.5, 6, hourAngle); // 时针
drawHand(radius 0.7, 4, minAngle); // 分针
drawHand(radius * 0.9, 2, secAngle); // 秒针
// 小圆心盖住中心
ctx.beginPath();
ctx.arc(centerX, centerY, 6, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
4. 实现平滑动画与优化
使用 requestAnimationFrame 替代 setInterval，实现更流畅的动画。
function animate() {
drawClock();
requestAnimationFrame(() => {
setTimeout(animate, 1000); // 每秒更新一次
});
}
animate(); // 启动时钟
这样可以避免频繁重绘造成性能浪费，同时保持与屏幕刷新率同步。
高级技巧总结
- 坐标变换：使用 save() 和 restore() 配合 translate 与 rotate，简化旋转逻辑。
- 渐变背景：createRadialGradient 增强立体感。
- 抗锯齿处理：合理设置 lineCap 和 lineWidth，让线条更柔和。
- 动画节流：虽然秒针每秒跳动一次，但使用 requestAnimationFrame 可更好控制渲染时机。
- 响应式设计：可根据 canvas 容器大小动态调整 radius，适配不同屏幕。
基本上就这些。通过组合路径、变换和定时机制，你可以用 Canvas 实现出既美观又精准的动态时钟。
