Canvas是绘制动态数字仪表盘最可控方案，因其支持精确角度映射、实时重绘与抗锯齿；需用requestAnimationFrame驱动、devicePixelRatio适配高DPI屏，并手动计算刻度对齐与指针缓动。
用 canvas 绘制动态数字仪表盘最可控
纯 CSS 实现带弧形刻度和指针的数字仪表盘几乎不可行——它需要精确的角度映射、实时重绘和抗锯齿渲染。canvas 是目前最直接、兼容性好（IE9+）、性能可预期的选择。SVG 虽然也能做，但动画响应慢、数值插值麻烦，尤其在频繁更新时容易卡顿。
核心思路是：用 canvas.getContext('2d') 手动画圆弧（刻度背景）、填充色块（进度弧）、旋转三角形（指针），再叠加居中数字文本。所有元素都基于当前数值实时计算角度，不依赖第三方库。
-
value映射到角度：假设量程 0–100，目标值 75 → 角度 =startAngle + (75 / 100) * (endAngle - startAngle) - 指针长度建议设为半径的 60%～70%，避免戳出表盘边缘
- 务必在每次重绘前调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则旧指针残留
requestAnimationFrame 更新比 setInterval 更稳
仪表盘数值如果来自传感器、WebSocket 或定时轮询，直接用 setInterval 更新 canvas 容易跳变或掉帧。浏览器对 requestAnimationFrame 的调度更贴合屏幕刷新率，视觉更顺滑，且页面后台运行时自动暂停，省资源。
关键点不是“要不要用”，而是“怎么用”：
立即学习“前端免费学习笔记（深入）”；
- 不要在 rAF 回调里做耗时计算（比如解析大 JSON），先算好数值再传入绘制函数
- 指针动画建议加简单缓动，例如
currentValue += (targetValue - currentValue) * 0.1，避免突兀转动 - 若数值静止，无需持续调用 rAF —— 检测到值未变就
cancelAnimationFrame
刻度文字对齐要手动算偏移，别信 textBaseline 默认值
仪表盘外圈的 0、25、50、75、100 这类刻度标签，如果直接用 ctx.fillText(text, x, y)，会发现文字上下错位、悬空或压线。这是因为 textBaseline = 'alphabetic'（默认）以字母底部对齐，而你需要的是“从圆弧中点沿半径向外对齐”。
- 先用三角函数算出刻度点坐标：
x = centerX + Math.cos(angle) * radius，y = centerY + Math.sin(angle) * radius - 再把文字锚点移到该点“正右方”或“正上方”：例如上刻度用
ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'，下刻度用'top' - 字体大小超过 16px 后，
fillText渲染可能模糊，加ctx.imageSmoothingEnabled = false强制像素级清晰
移动端适配别只缩放 canvas，要重设 devicePixelRatio
在 iPhone 或高 DPI 屏上，直接写 <canvas width="400" height="400"> 会导致图形发虚。因为 CSS 像素和物理像素不等价，必须按设备像素比重设 canvas 的内在宽高。
- 获取真实尺寸：
const dpr = window.devicePixelRatio || 1;，然后canvas.width = 400 * dpr;，canvas.height = 400 * dpr; - 再用 CSS 把 canvas 缩回 400×400：
canvas.style.width = '400px'; canvas.style.height = '400px'; - 最后别忘把所有绘图坐标、半径、字体大小也乘上
dpr，否则线条变细、文字变小
漏掉 dpr 校准是上线后被 QA 打回来最多的原因之一，尤其是 iOS 上指针边缘出现灰边、数字锯齿，基本就是这个没处理。
