Canvas绘折线图需手动处理坐标映射、平滑曲线、局部清屏、边界钳位及lineCap/lineJoin设为'round'，否则易出现僵硬、闪烁、越界、卡顿等问题。
直接用 绘制折线图，核心不是“能不能画”，而是怎么让线条不僵硬、坐标不越界、更新不闪烁、数据一多不卡死。Canvas 本身只提供底层绘图 API，没有自动缩放、没有坐标映射、没有重绘优化——这些全得你手动填坑。
canvas.getContext('2d') 后第一件事是做坐标系映射
原始数据如 [15, 28, 22, 40, 35] 是逻辑值，不能直接当像素用。必须先算出可视区域（含左右/上下留白），再把每个点映射到 Canvas 像素坐标：
- y 轴要反转：Canvas 的
y=0在顶部，而图表 y=0 通常在底部，所以pixelY = height - paddingBottom - (value - minY) / (maxY - minY) * usableHeight - x 轴等距分布：
pixelX = paddingLeft + i / (data.length - 1) * usableWidth（注意除零保护） - 务必提前过滤掉
NaN、Infinity或超出合理范围的异常值，否则lineTo(NaN, NaN)会静默中断整条路径
drawLinePath 里别直接 for 循环 lineTo
用 lineTo() 连点确实简单，但视觉生硬、拐角尖锐、动态追加时难衔接。真实项目中应优先考虑平滑曲线：
- 至少有 3 个点才启用
quadraticCurveTo(controlX, controlY, endX, endY)，控制点一般取中间点，起点是上一段终点 - 首次调用前必须
moveTo(firstX, firstY)，后续只追加quadraticCurveTo，不要重复beginPath() - 如果想让曲线更“松”或更“紧”，可微调控制点：比如把
controlY往起点和终点中点偏移 15%，避免过陡拐弯 - 注意：
quadraticCurveTo不接受数组参数，所有坐标都得是数字，别传错类型
动态更新时清屏范围必须精准
每帧都 ctx.clearRect(0, 0, width, height) 会导致明显闪烁，尤其在高刷屏或低性能设备上。正确做法是局部擦除：
- 只清除“上一帧末尾线段”所在矩形区域 + “本帧新增线段”的包围盒
- 可用
ctx.beginPath(); ctx.rect(x, y, w, h); ctx.clip(); ctx.clearRect(0, 0, width, height); ctx.restore();实现安全裁剪擦除 - 更轻量的做法：用离屏 canvas 预渲染静态背景（网格、坐标轴），主 canvas 只负责动态折线，两者叠加
- 若用双端队列管理滚动数据（如保留最近 100 点），记得每次
shift()后重算可视区域的minY/maxY，否则 y 轴刻度会“卡住”
lineCap 和 lineJoin 必须设为 'round'
默认 lineCap = 'butt' 和 lineJoin = 'miter' 在折线拐角处会露出尖锐三角或断口，尤其线宽 > 1 时特别明显：
-
ctx.lineCap = 'round'让每段线头变圆，消除锯齿感 -
ctx.lineJoin = 'round'让连接点变圆弧，而不是生硬折角 - 这两项不影响性能，但对视觉连贯性影响极大——很多“丑折线图”问题根源就在这儿
- 别碰
ctx.imageSmoothingEnabled：它关的是图片缩放抗锯齿，对矢量线无效，反而可能让文字标签模糊
Canvas 绘折线图最易被忽略的，其实是坐标映射后的边界截断处理：当某个数据点映射后 x 超出画布右边界、或 y 小于 0（即高于顶部），lineTo() 仍会把它画在不可见区域，导致路径状态异常、后续点偏移。务必在绘图前做 Math.max(paddingLeft, Math.min(width - paddingRight, pixelX)) 类似的钳位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
