HTML5中Canvas绘制动态折线图的平滑曲线处理

用quadraticCurveTo以中间点为控制点绘制二次贝塞尔曲线实现平滑折线，动态追加时缓存最近3点、仅重绘新增段并保持起点连贯，配合双端队列管理、lineCap/lineJoin优化及局部清屏提升性能。

Canvas绘制动态折线图时，原生lineTo只能画直线段，要实现视觉上自然的平滑曲线，需用贝塞尔曲线（尤其是bezierCurveTo或quadraticCurveTo）替代折线连接，再配合数据流更新与重绘控制。

用二次贝塞尔曲线拟合相邻三点

对连续数据点序列 [p0, p1, p2, ...]，以每个中间点 p1 为控制点，将 p0→p1→p2 转换为一段平滑弧线。Canvas中调用 quadraticCurveTo(p1.x, p1.y, p2.x, p2.y) 即可——起点为前一个端点（需先moveTo(p0)），控制点是当前数据点，终点是下一个数据点。

• 实际绘图前，至少需要3个有效点才开始画曲线；前两个点可用直线过渡或暂不绘制
• 控制点可微调：例如取 p1 偏移 10% 向量方向，避免拐角过尖
• 注意坐标需已转换为Canvas像素坐标（非原始数据值）

动态追加时保持曲线连贯性

新数据持续流入（如每100ms新增一个点），不能每次清空重绘整条线——否则会闪烁且失去“流动感”。应只绘制新增的一小段，并利用上一时刻的末尾点作为新曲线的起点。

• 缓存最近2–3个点（如lastPoints = [p_{n-2}, p_{n-1}, p_n]），新增p_{n+1}后，用p_{n-1}作控制点、p_n作起点、p_{n+1}作终点调用quadraticCurveTo
• 首次绘制用moveTo设起点，后续仅追加quadraticCurveTo，不重复beginPath和stroke外层操作
• 若需回溯滚动（如显示最近60秒），建议用双端队列管理点集，超出长度时从头部剔除

抗锯齿与性能优化细节

Canvas默认开启抗锯齿，但缩放或高密度点可能导致边缘模糊或性能下降。可通过调整线条宽度、关闭图像平滑或分段渲染缓解。

立即学习“前端免费学习笔记（深入）”；

• 设置ctx.lineCap = 'round'和ctx.lineJoin = 'round'，让线段衔接处更圆润
• 避免ctx.imageSmoothingEnabled = false（这会影响文字和图片，非必要不关）；改用ctx.lineWidth = 1.5提升视觉清晰度
• 每帧只重绘变化区域：用ctx.clearRect()仅擦除旧线末端+新线区域，而非全屏清空

简单示例：三阶平滑滚动曲线

以下逻辑可嵌入requestAnimationFrame循环中：

• 维护数组dataPoints，每次推入新点并限制长度（如dataPoints.length > 100 && dataPoints.shift()）
• 绘制时遍历i = 2 to dataPoints.length-1，对每组(i-2, i-1, i)调用quadraticCurveTo(data[i-1], data[i])，起始moveTo(data[0])
• 为增强动感，可对最后2–3段使用略高的lineWidth或渐变色