canvas实时图表滑动窗口渲染核心是“只画当前可见、只更新真正变化部分”，依赖坐标映射、缓冲管理与增量绘制协同：环形缓冲区恒定内存，逻辑索引线性映射像素位置，每帧仅清除移出区域并追加新点，辅以时间锚点插值和离屏预渲染保障高帧率。
Canvas 实时图表绘制中，滑动窗口数据的渲染逻辑核心是“只画当前可见、只更新真正变化的部分”，不是把所有历史数据重画一遍。它依赖坐标映射、缓冲管理与增量绘制三者协同，才能做到高帧率不卡顿。
滑动窗口的数据组织方式
滑动窗口本质是一个固定长度的环形缓冲区（circular buffer），新数据进来，最老的数据自动被覆盖。它不扩容、不拼接、不复制数组，内存占用恒定。
- 设窗口大小为 N（如 300 个点），用一个数组
data = new Float32Array(N)存储原始值 - 维护一个写指针
head，每次新增数据时：data[head % N] = newValue; head++ - 可视范围内的索引区间不是
[0, N)，而是[head - visibleCount, head)，需对% N取模处理跨边界情况 - 避免使用
Array.prototype.slice()或splice()——它们会触发内存分配和 GC，破坏实时性
坐标映射：从逻辑索引到像素位置
滑动窗口里“最新”不等于“最右”，因为数据持续流入，图表需要向左滚动。关键在于建立时间/序号 → 横坐标（x）的线性映射关系，且该映射随滚动动态偏移。
- 设画布宽度为
width，有效绘图区域左边界为leftPad，右边界为width - rightPad - 每个数据点水平间距：
stepX = (width - leftPad - rightPad) / visibleCount - 第
i个逻辑点（从窗口起始算）的横坐标：x = width - rightPad - (visibleCount - i) * stepX - 这样，最新点始终贴在右边界，旧点逐帧左移，形成自然滚动效果
增量绘制：避免整帧重绘
每帧只需重绘“进入视口的新点”和“移出视口的旧点留下的空白”，而不是清空全画布再重画整条线。
- 用
ctx.clearRect(xOld, yTop, widthOld, height)清除最左侧即将消失的一小竖条区域 - 用
ctx.lineTo(xNew, yNew)追加一个新端点，ctx.stroke()只描这一段新增路径 - 若使用 path API，可在上一帧路径基础上调用
ctx.lineTo()续画，再ctx.stroke()——比每次beginPath()+ 全量重绘快 3~5 倍 - 注意：仅当 y 坐标变化不大（如温湿度波动小）时才适合增量；剧烈跳变建议整段重绘以保形状准确
视觉一致性与抗抖动处理
硬件采样频率和 JS 执行节奏不同步，直接按原始时间戳映射会导致线条抖动或错位。需引入时间锚点与插值平滑。
- 每一帧以
performance.now()为统一时间基准，计算该帧内应显示的“理论最新点位置” - 若新数据尚未到达，用线性插值估算当前 y 值：
y = yPrev + (yNext - yPrev) * t，其中t是当前时刻在两个采样点之间的归一化比例 - 刻度线、网格、坐标轴等静态元素应预渲染到离屏 canvas，主画布只叠加动态折线，避免重复路径计算
- 启用
ctx.imageSmoothingEnabled = false防止缩放模糊，尤其在高 DPR 屏幕上
