优化长路径绘制性能的关键在于减少切换、计算和重绘：预计算坐标并缓存为扁平数组，单路径批量绘制，禁用浮点除法；y轴翻转处理；局部重绘替代全量清屏；关闭抗锯齿等冗余特性；离屏预渲染静态内容。
优化长路径绘制性能，关键不在“画得快”，而在“少切换、少计算、少重绘”。Canvas 的性能瓶颈往往集中在路径构造阶段，而不是线条本身——频繁调用 moveTo 和 lineTo 会反复触发状态机切换，坐标实时计算会拖慢帧率，全量重绘则引发闪烁与掉帧。
预计算坐标并批量塞入单路径
避免边算边画，尤其禁用每帧都做 (value - min) / (max - min) * height 这类浮点除法。应在数据加载或更新后，一次性将所有逻辑坐标转为 canvas 像素坐标，并缓存为扁平数组（如 [x0, y0, x1, y1, ...]）。注意 y 轴翻转：canvas 原点在左上，需用 canvasY = height - padding - scaleY * (value - min)。
- 只调用一次
beginPath()，再用moveTo(x0, y0)起笔 - 后续全部用
lineTo(x1, y1)连续追加，不重复moveTo - 多条折线各自建独立路径，但共用同一轮坐标预计算，避免缩放重复执行
局部重绘替代全量清屏
滚动窗口、实时数据流等场景下，整张图重绘既浪费又易闪烁。应识别变化区域，仅擦除+重绘必要部分。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 新数据到来时，只替换末尾 N 个点的坐标（如保留最近 100 点）
- 用
ctx.clearRect()精确擦除旧列（最左）和新增列（最右）的竖条区域 - 动画必须用
requestAnimationFrame驱动，确保与屏幕刷新同步
关闭冗余渲染特性
抗锯齿、线帽、阴影等默认开启的功能，在折线图等清晰线条场景中不仅无用，还显著增加 GPU 光栅化压力。
- 显式关闭：
ctx.imageSmoothingEnabled = false - 设硬边样式：
ctx.lineCap = 'butt'、ctx.lineJoin = 'miter' - 避免
shadowBlur、globalAlpha；线条宽度建议用奇数（如 1px、3px），利于像素对齐
分层与离屏预渲染
对静态或半静态内容（如坐标轴、网格线、背景标签），提前绘制到离屏 canvas，再整体贴图到主画布。
- 创建尺寸紧凑的 offscreen canvas（如刚好容纳网格线），避免过大导致复制开销
- 主 canvas 只负责动态内容（如折线、游标、高亮），减少路径重建频率
- 复杂文本或图标可统一预渲染为图像，避免每帧调用
fillText
