html5 canvas动态仪表盘核心是用arc()画刻度圆弧、rotate()结合lineto()绘制旋转指针，并通过requestanimationframe实现缓动更新；需计算刻度坐标、对齐文本、保存/恢复画布状态，辅以着色、阴影和响应式适配提升体验。
在 HTML5 Canvas 中绘制动态仪表盘，核心是用 arc() 画圆弧作为刻度盘，用 rotate() + lineTo() 绘制指针，并通过 requestAnimationFrame 实现平滑更新。关键不在“画什么”，而在“怎么让指针随数据自然转动”。
刻度盘：用同心圆弧+刻度线+数字标注
刻度盘本质是一个带标记的圆弧环。先画主圆弧（如 0°–270° 表示 0–100%），再按步长（如每 10% 对应 27°）绘制短线和文字：
- 用
ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, endAngle)绘制外圈圆弧 - 对每个刻度角
angle = startAngle + i * step，计算刻度线两端坐标：
内端：(cx + cos(angle) * (radius - 8), cy + sin(angle) * (radius - 8))
外端：(cx + cos(angle) * radius, cy + sin(angle) * radius) - 用
ctx.fillText(text, x, y)在刻度线外侧偏移位置写数值，注意用ctx.textAlign = 'center'和ctx.textBaseline = 'middle'对齐
指针：旋转画布后绘制三角形或箭头
指针不是独立图形，而是以表盘中心为原点、绕 Z 轴旋转的刚体。推荐用三角形指针（视觉稳、易控制）：
- 保存当前状态：
ctx.save() - 移动到中心并旋转：
ctx.translate(cx, cy); ctx.rotate(currentAngle)（currentAngle是弧度值，如 0.1 → 10% 对应 0.27π） - 绘制指针路径：
ctx.moveTo(0, -pointerLength); ctx.lineTo(-6, 5); ctx.lineTo(6, 5); ctx.closePath() - 填充并恢复：
ctx.fill(); ctx.restore()
动态更新：用 requestAnimationFrame 平滑过渡
直接跳变角度会生硬。应实现缓动效果，比如每次更新只走目标角度的 15%：
- 定义目标值
targetValue（0–100）和当前显示值currentValue - 在动画循环中：
currentValue += (targetValue - currentValue) * 0.15 - 将
currentValue映射为弧度：angle = startRad + (currentValue / 100) * (endRad - startRad) - 清空画布（
ctx.clearRect(0, 0, width, height)）→ 重绘刻度盘 → 绘制指针
增强体验的小细节
真实仪表盘不止是动，还要有反馈感：
- 指针尾部加个小圆点（
ctx.arc(cx, cy, 4, 0, Math.PI * 2)）强化旋转中心感 - 关键区域着色：如 0–30% 绿、30–70% 黄、70–100% 红，可用
createLinearGradient或分段画不同颜色圆弧 - 添加阴影：
ctx.shadowColor = 'rgba(0,0,0,0.2)'; ctx.shadowBlur = 4; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2让指针浮起 - 响应式适配：监听
window.resize，按容器尺寸重设canvas.width/height并重新绘制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
