HTML5 Canvas动态电子时钟需用requestAnimationFrame驱动、实时获取并格式化时间（如padStart补零）、居中绘制等宽字体文本，配合阴影增强可读性，并每次清空画布防重叠。
在HTML5中用Canvas绘制动态电子时钟，核心是结合requestAnimationFrame高效刷新、用toTimeString()或getHours()/getMinutes()/getSeconds()实时获取时间，并通过Canvas 2D API进行文本排版与样式控制。关键不在“画表盘”，而在于“电子数字”的清晰渲染与动态更新节奏。
基础结构：Canvas容器与上下文初始化
先在HTML中声明一个<canvas></canvas>元素，设置固定宽高（如width="400" height="120"），避免CSS缩放导致字体模糊。JS中用getContext('2d')获取绘图上下文，并统一设置字体、对齐和抗锯齿：
- 调用
ctx.textAlign = 'center'和ctx.textBaseline = 'middle'让数字居中定位更可控 - 启用平滑渲染：
ctx.imageSmoothingEnabled = false（对像素级数字可选），但对文字通常保持默认即可 - 推荐使用等宽字体如
'monospace'或'Courier New'，确保数字宽度一致，避免跳动
时间获取与格式化：零填充+实时更新
电子钟需显示HH:MM:SS格式，且每位数字都应为两位（如09:05:07）。不要依赖toLocaleTimeString()的区域格式，而是手动格式化：
- 用
date.getHours().toString().padStart(2, '0')逐项处理时、分、秒 - 将三部分拼成字符串：
`${hh}:${mm}:${ss}` - 每次绘制前调用
new Date()，不缓存时间对象——否则动画会延迟或卡顿
Canvas文本绘制：字号、颜色与阴影增强可读性
电子钟强调清晰易读，建议用大号字体（如64px）并添加轻微阴影提升对比度：
立即学习“前端免费学习笔记（深入）”；
-
ctx.font = 'bold 64px monospace'—— 加粗+等宽，数字更硬朗 -
ctx.fillStyle = '#00c8ff'—— 高饱和蓝青色，比纯白更护眼 -
ctx.shadowColor = 'rgba(0, 0, 0, 0.4)'; ctx.shadowBlur = 8; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2—— 柔和右下阴影，避免文字“陷”进背景 - 用
ctx.fillText(timeStr, canvas.width / 2, canvas.height / 2)居中绘制整串时间
动画循环：requestAnimationFrame替代setInterval
用setInterval(draw, 1000)会导致秒针“跳变”且不同步系统时钟。正确做法是每帧检查当前秒数是否变化，只在必要时重绘：
- 定义
let lastSec = -1记录上一次绘制的秒数 - 在动画函数中：
const now = new Date(); const currentSec = now.getSeconds(); if (currentSec !== lastSec) { draw(); lastSec = currentSec; } - 用
requestAnimationFrame(loop)驱动主循环，保证与屏幕刷新率同步，流畅不掉帧
不复杂但容易忽略：Canvas内容不会自动清除，每次重绘前需调用ctx.clearRect(0, 0, canvas.width, canvas.height)清空画布，否则数字会残留重叠。加上防抖判断和居中排版，一个轻量、精准、视觉清爽的网页电子钟就完成了。
