canvas绘制动态时钟

Canvas是在HTML5中用于绘制图形的一种技术，可以用来创建各种动态效果，比如动态时钟。要绘制一个动态时钟，你可以按照以下步骤操作：

1. **获取Canvas元素**：
首先，在HTML中创建一个`<canvas>`标签，并给它一个id，如`<canvas id="myClock"></canvas>`。

2. **JavaScript处理**：
使用JavaScript获取canvas元素，并创建绘图上下文（context）。例如：

   const canvas = document.getElementById('myClock');
   const ctx = canvas.getContext('2d');

3. **设置定时器**：
创建一个`setInterval`函数，每隔一段时间更新一次时钟。这里通常会计算当前时间并将其转换为显示在时钟上的文本。

4. **绘制时钟**：
- **画背景圆**：使用`arc()`方法绘制圆形背景，表示时钟盘面。
- **画指针**：为每个小时和分钟创建小矩形，表示时针和分针，然后根据时间位置移动它们。

function drawTime() {
    // 获取当前时间
    const now = new Date();
    
    // 设置时钟盘面中心和大小
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = Math.min(centerX, centerY) * 0.8;
    
    // 清除上一次绘制
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 画背景圆
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'white';
    ctx.fill();
    
    // 画小时和分钟指针
    let hourAngle = ((now.getHours() % 12) + now.getMinutes() / 60) * (2 * Math.PI / 12); // 弧度
    let minuteAngle = now.getMinutes() * (2 * Math.PI / 60); // 弧度
    
    ctx.save(); // 保存当前状态
    ctx.translate(centerX, centerY);
    ctx.rotate(hourAngle); // 转动到小时角度
    ctx.fillRect(-radius * 0.7, -radius * 0.15, radius * 1.4, radius * 0.3); // 画小时指针
    ctx.restore();

    ctx.rotate(minuteAngle); // 转回原点并旋转到分钟角度
    ctx.fillRect(-radius * 0.9, -radius * 0.2, radius * 0.6, radius * 0.4); // 画分钟指针
}

// 开始定时器
setInterval(drawTime, 1000);