双刻度仪表盘需分层绘制：外圈主刻度（r=200，-π/2起始，270°扫角）保精度，内圈副刻度（r=170，略窄扫角）示区间；文字用textAlign='center'、textBaseline='middle'及极坐标定位；绘制顺序为背景→副刻度→主刻度→指针，副刻度用rgba半透色，指针用深灰圆头，动画仅重绘指针区域防闪烁。
双刻度仪表盘不是加两圈数字就行，关键在坐标映射和视觉分层——主刻度负责读数精度，副刻度承担趋势/区间提示，两者角度、半径、颜色必须错开，否则会互相干扰。
canvas.arc() 画双弧线时半径和起始角怎么配？
双刻度本质是两个同心但参数不同的弧形轨迹：一个画外圈主刻度（比如 0–100），一个画内圈副刻度（比如 Low/Mid/High 区间）。不能共用同一组 arc() 参数。
- 主刻度弧线：半径大（如
r = 200），起始角通常设为-Math.PI / 2（顶部朝下，符合常规仪表习惯） - 副刻度弧线：半径小（如
r = 170），起始角可相同，但终点角建议略收窄（比如主刻度扫 270°，副刻度只扫 250°），避免末端重叠 - 别直接用
stroke()画完就走——先ctx.save()，画完ctx.restore()，防止后续旋转或样式污染
刻度文字对齐总偏移？用 ctx.textAlign 和 ctx.textBaseline 控制
Canvas 文字默认以左下角为锚点，往表盘上贴数字时极易错位。不调这两个属性，12点方向的“0”会掉到表盘外面。
-
ctx.textAlign = 'center'：让文字水平居中对齐指定 x 坐标 -
ctx.textBaseline = 'middle'：让文字垂直居中对齐指定 y 坐标 - 计算每个刻度文字坐标时，要用极坐标转直角坐标：
x = cx + r * Math.cos(angle)，y = cy + r * Math.sin(angle)，其中angle是从 0 开始的弧度值（注意和arc()的起始角保持一致） - 副刻度如果是文字标签（如 “LOW”），字号建议比主刻度小 2–3px，并用不同颜色（比如灰色）降低视觉权重
指针和双刻度颜色冲突怎么办？
指针旋转后常会扫过副刻度区域，如果副刻度是实心色块，指针一动就看不清。这不是 bug，是绘制顺序没安排好。
- 严格按「背景弧 → 副刻度 → 主刻度 → 指针」顺序绘制，确保指针永远在最上层
- 副刻度若用扇形填充（
fill()），建议透明度设为ctx.fillStyle = 'rgba(128, 128, 128, 0.3)'，既可识别又不抢眼 - 指针本身别用纯黑或纯白——容易和刻度文字打架；推荐深灰（
#333）或主题色加深版，宽度至少 6px，末端加个圆头（ctx.lineCap = 'round'）更稳重
最容易被忽略的是动画帧同步：双刻度本身不动，但指针用 requestAnimationFrame() 更新时，如果每次重绘都清空整个 canvas（clearRect()），会导致高频闪烁。应该只清除指针旧位置（用背景色重绘一小块），再画新位置——这对双刻度这种静态+动态混合结构尤其关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
