如何通过HTML5的Canvas绘制算法实现网页版的实时心电图波形监测

Canvas实现网页端实时ECG波形需高效绘制动态折线、平滑滚动更新与生理节律模拟，核心是数据流稳定、时序准确、视觉可读；通过坐标系适配、双缓冲绘图、合成算法生成P-QRS-T波形、性能优化及交互增强达成60fps不卡顿。

用 Canvas 实现网页端实时心电图（ECG）波形，核心在于高效绘制动态折线、平滑滚动更新、模拟生理节律，并保持 60fps 渲染不卡顿。关键不是画得“像”，而是数据流稳定、时序准确、视觉可读。

1. Canvas 初始化与坐标系适配

ECG 波形需横轴为时间（通常 25mm/s，即 100px/s）、纵轴为电压（如 ±2mV → ±100px）。建议设置 canvas 宽高固定（如 800×300），用 ctx.scale() 或手动计算像素映射，避免反复 resize 触发重排。

• 设采样率 500Hz（即每 2ms 一个点），每秒生成 500 个数据点
• 横轴：1 秒占 100px → 每个点水平间距 = 100 / 500 = 0.2px（需 sub-pixel 渲染，Canvas 支持）
• 纵轴：±2mV 映射到 canvas 高度中间 ±100px，用 y = centerY - value * scale 转换

2. 双缓冲绘图 + 时间驱动更新

直接逐点 drawLine 会闪烁且掉帧。推荐使用「双数组缓冲」+ requestAnimationFrame 控制节奏：

• 维护两个 Float32Array 缓冲区：bufferA（当前显示）、bufferB（后台写入）
• 每 2ms 接收一个新 ECG 值，追加进 bufferB；当 bufferB 达到可视宽度（如 800px ÷ 0.2px/point = 4000 点），整体左移并填新值（循环队列逻辑）
• 在 requestAnimationFrame 回调中，仅用 bufferA 绘制整条折线（beginPath→moveTo→lineTo×N→stroke），绘制完后原子交换 bufferA/B 引用

3. 模拟真实 ECG 节律与滤波（前端轻量版）

纯随机数无法体现 P-QRS-T 波形。可用简化的合成算法生成近似波形：

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

• 每 ~800ms 触发一次“心跳”：叠加高斯脉冲（QRS 主峰）、衰减正弦（T 波）、小缓升沿（P 波）
• 添加 ±0.1mV 随机基线漂移（每 5 秒缓慢偏移）和高频噪声（每点 ±0.02mV）
• 前端可做简单移动平均滤波（如 3 点均值）抑制毛刺，但避免复杂卷积（JS 计算开销大）

4. 性能优化与交互增强

真实场景需支持缩放、暂停、导出。这些功能不能阻塞主渲染循环：

• 缩放：不重采样数据，仅调整 x/y 映射系数，重绘时用 scale() + translate() 变换 canvas 上下文
• 暂停：停止追加新数据，但继续用 requestAnimationFrame 渲染静止波形（防浏览器节流）
• 导出 PNG：调用 canvas.toDataURL('image/png')，注意跨域图片资源会触发安全异常，ECG 纯绘制无此问题
• 添加 1s 网格线（浅灰）和标尺文字（如 “25mm/s”, “1mV=10mm”）提升临床可读性

不复杂但容易忽略：确保时间戳对齐（用 performance.now() 校准采样间隔）、关闭抗锯齿（ctx.imageSmoothingEnabled = false 防波形虚化）、用 ctx.lineWidth = 1.5 提升线条清晰度。真实医疗设备需符合 IEC 60601，网页版侧重教学或预览，重点是数据流可信、视觉响应及时。