canvas倒计时动画的核心是requestanimationframe驱动+clearrect清除重绘，避免残影闪烁；需用performance.now()精准计时、textbaseline/middle居中文字、适配dpr防模糊，并在结束时cancelanimationframe清理资源。
Canvas倒计时动画的核心是requestAnimationFrame + 清除重绘
直接用 setInterval 配合 fillText 反复画数字，画面会闪烁或掉帧。真正流畅的倒计时必须用 requestAnimationFrame 驱动，并在每次绘制前调用 clearRect 清空上一帧——否则数字会层层叠印，变成糊成一片的残影。
常见错误现象：ctx.fillText("5", 100, 100) 连续执行 5 次后，画布上出现 5 个“5”堆叠在一起；或者倒计时跳变不连贯，卡在某个数字超过 1 秒。
- 每次循环开始必须调用
ctx.clearRect(0, 0, canvas.width, canvas.height) - 时间计算别依赖
setInterval的间隔精度，用performance.now()或传入requestAnimationFrame的时间戳做差值更可靠 - 如果倒计时要暂停/恢复，不要用
cancelAnimationFrame后再启新循环，而是用布尔开关控制是否继续调用下一次requestAnimationFrame
数字居中与抗锯齿处理容易被忽略
Canvas 默认文字渲染有锯齿，尤其在 Retina 屏上，“3”、“8”等弧形数字边缘发虚或断线。同时，fillText 的坐标是基线（baseline）位置，不是文字中心，直接写 fillText("10", canvas.width/2, canvas.height/2) 会导致数字明显偏高。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 开启平滑：设置
ctx.imageSmoothingEnabled = false（对文字无效），真正起作用的是ctx.textAlign = "center"和ctx.textBaseline = "middle" - 居中写法：
ctx.fillText(seconds.toString(), canvas.width / 2, canvas.height / 2)—— 前提是已设好textAlign和textBaseline - 字体选无衬线、等宽体更利于倒计时可读性，例如
ctx.font = "bold 48px 'Helvetica Neue', sans-serif"
Canvas尺寸缩放导致像素模糊怎么办
用 CSS 设置 canvas { width: 300px; height: 150px; }，但没同步设置 canvas 元素的 width 和 height 属性，就会触发浏览器拉伸渲染，倒计时数字毛边、边缘抖动。
- 正确做法：先读取 canvas 的
clientWidth/clientHeight，再赋值给canvas.width/canvas.height - 高 DPI 适配需额外处理：
const dpr = window.devicePixelRatio || 1;，然后将 canvas 属性设为clientWidth * dpr，再用ctx.scale(dpr, dpr)缩放上下文 - 注意：
scale()会影响所有后续绘制（包括clearRect参数），所以clearRect的宽高也要乘以dpr，或改用getBoundingClientRect()计算逻辑坐标
倒计时结束时的资源清理和状态反馈
动画结束却不调用 cancelAnimationFrame，会导致定时器持续运行、CPU 占用上升，尤其页面隐藏后仍可能触发回调（部分浏览器会降频，但不保证）。
- 必须保存
requestAnimationFrame返回的 ID，结束时传给cancelAnimationFrame(id) - 结束状态不要只靠
seconds 判断，要加一个 <code>isRunning = false标志位，防止用户快速点击“开始”又“停止”引发多次重复调用 - 如果需要播放结束音效或触发动画，建议在清除帧循环后，用
setTimeout(() => { /* 结束逻辑 */ }, 0)确保脱离当前渲染帧，避免阻塞
Canvas 倒计时看似简单，真正上线时最容易栽在 DPI 适配、帧清理遗漏、文字基线错位这三处。尤其是移动端混合开发里，WebView 对 devicePixelRatio 的支持差异很大，最好把缩放逻辑封装成独立函数，每次 resize 后都重置 canvas 属性和 ctx 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
