html5使用canvas绘制动态时钟 html5使用图形画布的高级技巧

<canvas id="clock" width="400" height="400"></canvas>

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;

function drawDial() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
<p>// 外圈边框
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.lineWidth = 6;
ctx.strokeStyle = '#333';
ctx.stroke();</p><p>// 内部渐变填充
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
gradient.addColorStop(0, '#f0f0f0');
gradient.addColorStop(1, '#ccc');
ctx.fillStyle = gradient;
ctx.fill();</p><p>// 绘制刻度
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;</p><pre class='brush:php;toolbar:false;'>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)
  );
}

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();
}
<p>function drawClock() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();</p><p>// 重绘表盘
drawDial();</p><p>// 计算角度（注意：Math.PI <em> 0.5 是起始偏移，因为 0 度指向右，而时钟从上开始）
const secAngle = seconds </em> (Math.PI / 30) - Math.PI / 2;
const minAngle = (minutes + seconds / 60) <em> (Math.PI / 30) - Math.PI / 2;
const hourAngle = (hours + minutes / 60) </em> (Math.PI / 6) - Math.PI / 2;</p><p>// 绘制指针
drawHand(radius <em> 0.5, 6, hourAngle);   // 时针
drawHand(radius </em> 0.7, 4, minAngle);    // 分针
drawHand(radius * 0.9, 2, secAngle);    // 秒针</p><p>// 小圆心盖住中心
ctx.beginPath();
ctx.arc(centerX, centerY, 6, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}</p>

function animate() {
  drawClock();
  requestAnimationFrame(() => {
    setTimeout(animate, 1000); // 每秒更新一次
  });
}
animate(); // 启动时钟