HTML5 Canvas轻松制作个性化时钟教程

May 4, 2026

—

在这个数字化时代，个性化时钟不仅能够为我们的日常生活增添一份独特的韵味，还能通过编程的乐趣来提升我们的技能。HTML5 Canvas 提供了一个强大的平台，让我们可以轻松地制作出各种风格的个性化时钟。下面，就让我带你一步步走进 HTML5 Canvas 的世界，一起制作一个属于你自己的时钟吧！
准备工作
在开始之前，请确保你的电脑上安装了支持 HTML5 的浏览器，比如 Chrome、Firefox 或 Edge。此外，你还需要一个文本编辑器，如 Notepad++ 或 Visual Studio Code，用于编写和编辑代码。
第一步：创建基本结构
首先，我们需要创建一个 HTML 文件，并在其中添加一个

在上面的代码中，我们创建了一个宽度和高度分别为 400 像素的

function drawClock() {
const now = new Date();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();

// 设置时钟的半径和中心点
const radius = canvas.width / 2;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 绘制表盘
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = ‘#fff’;
ctx.fill();

// 绘制时针
const hourDegree = (hour % 12 + minute / 60) * 30;
ctx.beginPath();
ctx.lineWidth = 8;
ctx.lineCap = ’round’;
ctx.moveTo(centerX, centerY);
ctx.rotate(hourDegree * Math.PI / 180);
ctx.lineTo(centerX, centerY – radius * 0.8);
ctx.strokeStyle = ‘#000′;
ctx.stroke();

// 绘制分针
const minuteDegree = (minute + second / 60) * 6;
ctx.beginPath();
ctx.lineWidth = 5;
ctx.lineCap = ’round’;
ctx.moveTo(centerX, centerY);
ctx.rotate(minuteDegree * Math.PI / 180);
ctx.lineTo(centerX, centerY – radius * 0.9);
ctx.strokeStyle = ‘#000′;
ctx.stroke();

// 绘制秒针
const secondDegree = second * 6;
ctx.beginPath();
ctx.lineWidth = 3;
ctx.lineCap = ’round’;
ctx.moveTo(centerX, centerY);
ctx.rotate(secondDegree * Math.PI / 180);
ctx.lineTo(centerX, centerY – radius * 0.95);
ctx.strokeStyle = ‘#f00’;
ctx.stroke();

// 绘制表盘刻度
for (let i = 0; i < 60; i++) { ctx.beginPath(); ctx.lineWidth = 1; ctx.moveTo(centerX, centerY); ctx.rotate(i * 6 * Math.PI / 180); ctx.lineTo(centerX, centerY - radius * 0.1); ctx.strokeStyle = '#ccc'; ctx.stroke(); } // 绘制表盘数字 for (let i = 1; i <= 12; i++) { ctx.beginPath(); ctx.lineWidth = 1; ctx.moveTo(centerX, centerY); ctx.rotate((i - 3) * 30 * Math.PI / 180); ctx.lineTo(centerX, centerY - radius * 0.15); ctx.strokeStyle = '#000'; ctx.stroke(); ctx.fillText(i, centerX + (radius * 0.2) * Math.cos((i - 3) * 30 * Math.PI / 180), centerY + (radius * 0.2) * Math.sin((i - 3) * 30 * Math.PI / 180)); } } // 使用 requestAnimationFrame 方法更新时钟 requestAnimationFrame(drawClock); 在上面的代码中，我们首先获取了