必须用 requestanimationframe 驱动循环，配合 clearrect 清屏、坐标映射、分层绘制；否则易现残影、错位、掉帧。因其对齐浏览器刷新节奏、自动暂停省资源，而 setinterval 易致撕裂卡顿；清屏防鬼影，缓存宽高属性提效，离屏绘制静态背景，正确处理y轴方向与设备像素比，动态计算线性映射，文本居中更可控，分层按变化粒度重绘，并显式重置上下文状态。
Canvas 动态渲染复杂图形，关键不在“画得出来”，而在“画得稳、画得清、画得不卡”。直接结论：必须用 requestAnimationFrame 驱动循环，配合 clearRect 清屏 + 坐标映射 + 分层绘制，否则很快出现残影、错位、掉帧。
为什么 requestAnimationFrame 是硬性要求，不是可选项
Canvas 没有自动刷新机制，所有像素都靠你手动重写。用 setInterval 会脱离屏幕刷新节奏，导致动画撕裂或卡顿；而 requestAnimationFrame 能对齐浏览器的合成周期（通常 60fps），且在页面不可见时自动暂停，省资源。
- 每次调用前必须执行
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则上一帧残留像素会叠加成“鬼影” - 不要在循环里反复调用
canvas.width/canvas.height——它们是只读属性，但频繁读取仍影响性能；建议缓存为变量 - 如果图形有固定背景（如网格线），可先画到离屏
OffscreenCanvas或另一个<canvas></canvas>元素上，再用drawImage复制，避免每帧重绘静态部分
坐标映射出错会导致整个图形偏移或缩放失真
Canvas 的 Y 轴向下增长，而大多数数据（如时间序列、数学坐标）默认 Y 向上。不转换就直接映射，图形会上下翻转。更常见的是忽略设备像素比（window.devicePixelRatio），导致高 DPI 屏幕上图形模糊或尺寸错误。
- 设置 canvas 实际分辨率时，要同时修改 DOM 属性和 CSS 样式：
canvas.width = canvas.clientWidth * window.devicePixelRatio，canvas.height = canvas.clientHeight * window.devicePixelRatio，再用ctx.scale(devicePixelRatio, devicePixelRatio)统一缩放上下文 - 线性映射函数不能硬编码 min/max，必须从当前数据集实时计算：
scale(value, Math.min(...data), Math.max(...data), 0, canvas.width) - 绘制文本时，
textBaseline = 'middle'和textAlign = 'center'往往比默认值更可控，尤其在动态标注坐标点时
分层绘制不是为了“结构好看”，而是为了控制重绘粒度
复杂图表（比如带图例、轴线、多系列折线、悬停高亮点）如果全塞进一个绘制函数，每次重绘都扫完整个画布，CPU 和 GPU 压力陡增。分层本质是把“变”和“不变”分开处理。
- 背景层（网格、坐标轴）→ 每次动画循环只重绘一次，或仅在缩放/平移时更新
- 数据层（折线、散点、热力块）→ 每帧根据数据状态更新，但只重绘变化区域（可用
ctx.save()/ctx.restore()限定 clip 区域） - 交互层（tooltip、临时高亮圆圈）→ 只在
mousemove触发且命中数据点时才绘制，且绘制后立即清除，不参与主循环 - 注意：
ctx.beginPath()必须在每个独立路径前调用，漏掉会导致前一个moveTo影响后续路径起点
最易被忽略的一点：Canvas 不保存任何状态，所有样式（fillStyle、lineWidth、globalCompositeOperation）都是上下文的一部分。一旦你在某层用了 ctx.globalCompositeOperation = 'lighter'，它会持续生效直到你显式改回去——这常导致后续图层颜色异常叠加。每次切换绘制逻辑前，最好显式重置关键状态。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
