canvas画圆形仪表盘不准因角度单位为弧度且0弧度指向正右方；需将度数转弧度并偏移-π/2对齐12点方向，且必须调用beginpath()和stroke()/fill()才能显示。
Canvas 绘制圆形仪表盘时，arc() 的 startAngle 和 endAngle 为什么总是画不准？
因为 Canvas 的角度单位是弧度，不是度数，且 0 弧度指向正右方（X 轴正向），不是 12 十二点方向。很多初学者直接传 0 到 180，结果画出来是半圆横着的。
正确做法是：把目标角度（比如 0°～270° 表示 0～100%）先转成弧度，再偏移 -Math.PI / 2（即逆时针转 90°），让 0% 对齐 12 点钟方向：
const startRad = -Math.PI / 2; // 12 点方向 const endRad = -Math.PI / 2 + (value / 100) * Math.PI * 1.5; // 0~100% → 0~270° → 0~1.5π 弧度
-
Math.PI * 1.5对应 270°，适合常见三刻度（-30°～330°）或 0～100% 场景；若需 360° 全圆，用Math.PI * 2 - 务必用
ctx.beginPath()开始路径，否则旧路径残留会导致重绘异常 - 别忘了
ctx.stroke()或ctx.fill()，只调arc()不会显示任何东西
SVG 实现圆形仪表盘，<circle></circle> 和 <path></path> 哪个更适合动态更新？
<path></path> 更灵活，尤其配合 stroke-dasharray + stroke-dashoffset 做进度动画时性能好、控制精准；<circle></circle> 只能靠 stroke-dasharray 模拟弧长，但无法指定起始角度（默认从 3 点钟方向开始）。
推荐用 <path></path> 画圆弧路径，通过 d 属性生成 SVG Path 数据：
function getArcPath(cx, cy, r, startAngle, endAngle) {
const x1 = cx + r * Math.cos(startAngle);
const y1 = cy + r * Math.sin(startAngle);
const x2 = cx + r * Math.cos(endAngle);
const y2 = cy + r * Math.sin(endAngle);
const largeArcFlag = endAngle - startAngle >= Math.PI ? 1 : 0;
return `M${x1} ${y1} A${r} ${r} 0 ${largeArcFlag} 1 ${x2} ${y2}`;
}
- 传入角度必须是弧度，且
startAngle默认从 3 点钟方向起算；如要 12 点起始，仍需整体减Math.PI / 2 - 更新时直接改
pathElement.setAttribute('d', ...)，比重绘<circle></circle>更轻量 - 注意
stroke-linecap="round"让弧线两端圆润，否则尖角突兀
用 CSS + border-radius 做“伪圆形仪表盘”，为什么指针旋转总偏移？
因为 transform: rotate() 默认以元素左上角为原点，不是圆心。即使加了 transform-origin: center，如果容器本身没居中、或指针元素宽高不为 0，依然会错位。
真正可靠的做法是：指针用绝对定位的 <div>，尺寸设为 <code>2px × length，然后用 transform-origin: bottom center，并确保父容器 position: relative 且宽高一致：
.gauge {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
.pointer {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 80px;
background: #3498db;
transform-origin: bottom center;
transform: translate(-50%, -100%) rotate(-90deg); /* -90° 对齐 12 点 */
}
-
translate(-50%, -100%)把指针底部锚点精确对齐圆心，这是关键一步 - 旋转值用
(value / 100) * 270 - 90（单位：度），对应 0%→-90°，100%→180° - 避免给指针设
border-radius或box-shadow，它们会影响transform-origin的实际生效位置
React/Vue 中动态更新仪表盘，为什么 useEffect 或 watch 触发后视觉延迟或跳变？
因为 DOM 更新和 Canvas/SVG 渲染不同步，尤其在快速变化时，直接每帧重绘会造成卡顿或数值跳跃。更稳的方式是：用 requestAnimationFrame 节流 + 插值过渡。
例如在 React 中，不直接响应 value 变化，而是记录目标值，再在 rAF 回调里线性插值：
useEffect(() => {
let startTime = null;
const animate = (timestamp) => {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / 300, 1); // 300ms 动画
const eased = 1 - Math.pow(1 - progress, 3); // 缓出
const current = prevValue + (targetValue - prevValue) * eased;
drawGauge(current); // 实际绘制函数
if (progress
- 不要在每次
value改变时都全量重绘 Canvas —— 先清空（clearRect），再重绘，否则残留痕迹明显 - SVG 中频繁 setAttribute 会触发 layout，建议把
<path></path>提前挂载好，只更新d和stroke - 移动端要注意
requestAnimationFrame在后台标签页可能被节流，必要时加 visibilitychange 监听
弧度换算、坐标锚点、动画节奏——这三个地方出错，仪表盘看起来就会“不聪明”。细节不在炫技，在每一笔都落在该落的位置。
