canvas 可高效实现轻量实时仪表盘，关键在于数据流解耦、requestanimationframe 控制渲染、离屏 canvas 复用静态图、增量绘制动态曲线、角度缓动模拟指针、响应式缩放与坐标映射。
Canvas 本身不提供图表组件，但通过直接绘制像素和配合 JavaScript 动画逻辑，能高效实现轻量、高响应的实时仪表盘——关键在于合理组织数据流、控制重绘节奏、复用图形对象，并避免每帧全量重绘。
用 requestAnimationFrame 控制渲染节奏
替代 setInterval，requestAnimationFrame 自动适配屏幕刷新率（通常 60fps），保证动画平滑且节省 CPU。对实时数据，应把数据更新与渲染解耦：数据到达时仅存入缓冲区，渲染帧中统一读取最新值并绘制。
- 每次 render 函数开始先清空 canvas（
ctx.clearRect(0, 0, width, height)），再按需重绘变化部分 - 对静态背景（如表盘底图、坐标轴）可预先绘制到离屏 canvas，每帧直接 drawImage 复用，减少重复计算
- 避免在 render 中执行耗时操作（如 JSON 解析、数组排序），这些应在数据接收时完成
动态曲线图：增量绘制与数据窗口管理
实时折线图不必保留全部历史点。设定固定长度的数据窗口（如最近 200 个采样点），新数据 push 入队、shift 踢出旧点，再映射为 canvas 坐标绘制折线。
- 使用
ctx.beginPath() → ctx.moveTo() → ctx.lineTo() × n → ctx.stroke()绘制单条折线，比循环调用 stroke 更快 - 若有多条曲线，分别缓存各自 path（用 Path2D 构造），重绘时只更新顶点坐标，避免重复路径构建
- 对高频数据（>50Hz），可做简单降采样（如取 min/max 或平均值）再进窗口，防止视觉过载
仪表指针与环形进度：角度驱动 + 缓动过渡
模拟机械仪表盘的关键是让指针转动有物理感。不直接跳转目标角度，而是基于当前角度和目标角度，每帧按 easing 函数（如 easeOutCubic）逐步逼近。
- 定义指针旋转中心、半径、起止角度范围（如 0°~270° 对应 0~100%），将数值线性映射为弧度
- 用
ctx.save() → ctx.translate() → ctx.rotate() → ctx.drawImage(pointerImg) → ctx.restore()高效绘制旋转指针 - 环形进度可用 arc 绘制两段圆弧：底层灰色圆弧（完整圆）、上层彩色圆弧（按百分比绘制），无需 SVG 或 clipPath
响应式与交互：监听 resize + 简单事件代理
Canvas 不自动响应尺寸变化，需监听 window.resize 并重设 canvas.width/height（非 CSS 宽高），再触发一次重绘。交互上，Canvas 无原生事件委托，但可通过 canvas.getBoundingClientRect() 计算鼠标相对坐标，手动判断点击区域。
- 保存原始 canvas 像素尺寸（如 800×400），CSS 缩放由外部容器控制，绘制时按比例换算坐标
- 对按钮、开关等控件，不单独创建 DOM 元素，而是在 canvas 上绘制矩形+文字，点击时检测 mouse(x,y) 是否落在该矩形内
- 触摸设备需同时监听 touchstart/touchmove，并将 touches[0] 的 clientX/Y 映射为 canvas 坐标
Canvas 实现仪表盘不依赖框架，但需要更精细的状态管理和绘制优化。从单个指针起步，逐步叠加曲线、告警色块、多面板布局，就能构建出低延迟、可嵌入工业 HMI 或物联网前端的实时可视化界面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
