Canvas或CSS+transform做动态仪表图更可控轻量，关键在数值与角度严格映射（如0–100%→0°–180°）、requestAnimationFrame实现平滑动画、局部清屏防闪烁、刻度标签合理嵌入及颜色响应精准匹配。
直接用 canvas 或纯 CSS + transform 做动态仪表图，比套用现成库更可控、更轻量，也更容易嵌入现有 HTML 项目——尤其当你只需要一个带刻度、指针、颜色响应的单指标表盘（比如湿度、完成率、负载百分比）时。
用 canvas 绘制可动画的半圆仪表图
Canvas 是最稳妥的选择：不依赖第三方、兼容性好、角度和填充逻辑完全由你掌控。关键不是画得“像”，而是让指针旋转角度与数值严格映射，并支持平滑过渡。
- 仪表图本质是绘制一段圆弧 + 一个旋转的指针线段；半圆对应 0–100%，即 0° 到 180°
- 指针旋转角度 =
value * 1.8（因为 100% → 180°，所以每 1% = 1.8°），注意要限制在0–180范围内 - 用
requestAnimationFrame替代setTimeout实现流畅动画，避免跳变 - 刻度线可用循环 +
ctx.moveTo()/ctx.lineTo()手动绘制，每 10% 画一条长线，中间画短线 - 填充色带建议用
createLinearGradient沿弧线方向渐变（如红→黄→绿），别用径向——它会失真
示例核心片段：
const ctx = canvas.getContext('2d');
function drawGauge(value) {
const angle = Math.min(180, Math.max(0, value * 1.8)) * Math.PI / 180;
// 清空、画底弧、画指针...
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -radius * 0.7);
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 4;
ctx.stroke();
ctx.restore();
}用 CSS + transform: rotate() 实现零 JS 仪表图
如果数值固定或仅需简单更新（比如后台吐出一个 JSON，前端只渲染一次），纯 CSS 方案更快、更省资源。但要注意：它无法做“动态插值动画”，只能靠 transition 触发重绘。
立即学习“前端免费学习笔记（深入）”；
- 结构上用两个
div：外层.gauge-base（半圆灰色底），内层.gauge-fill（带overflow: hidden的半圆容器） -
.gauge-fill里再放一个长矩形（高度=半径×1.5，宽度=4px），通过transform: rotate()控制其顶端指向目标角度 - 旋转原点必须设为
transform-origin: center bottom，否则指针会绕中心转，不是绕表盘底部转 - 角度计算同 canvas：100% → 180deg，所以
style="transform: rotate(${value * 1.8}deg)" - 若要颜色分段（如 85% 绿），需用三个重叠的
.gauge-fill，各自控制clip-path或mask
动态更新时常见的 DOM 和数值陷阱
仪表图“动不起来”或“数值对不上”，90% 出现在数据绑定环节，而不是绘图本身。
- 从 API 或表格读取的值可能是字符串（如
"72"或"72%"），务必用parseFloat()并校验isNaN() - HTML 中写死的
data-value="72"，JS 里要用el.dataset.value获取，不是getAttribute - 多个仪表图共用同一份数据时，别在循环里重复查 DOM —— 缓存
querySelectorAll('.gauge')结果，再遍历更新 - Canvas 清屏别用
ctx.clearRect(0,0,w,h)粗暴全清，会导致闪烁；应只清局部区域，或用双缓冲（offscreenCanvas） - 移动端 Safari 对
transform: rotate()的小数角度渲染有偏移，建议四舍五入到一位小数
要不要加刻度标签？加在哪一层？
刻度标签（0、20、40…100）不是装饰，而是可读性的底线。但它最容易破坏性能或布局——尤其用 JS 动态生成 span 插入时。
- 静态刻度建议直接用 SVG
<text></text>写死在 canvas 上，或用 CSS 伪元素（::before）配合定位 - 若必须 JS 生成，不要每个刻度都新建
div；用一个container+innerHTML一次性写入全部span，减少重排 - 标签文字颜色随背景反色（如深色底用白字），但别用
filter: invert()—— 它会影响子元素所有颜色，包括指针 - Canvas 中写文字用
ctx.fillText()，注意设置textAlign = 'center'和textBaseline = 'middle'，否则位置飘忽
真正难的不是画出一个表盘，而是让它的角度、颜色、标签、响应速度，在不同设备、不同数据节奏下保持一致——这些细节不会报错，但用户一眼就能感觉到“卡”或“不准”。
