尧图网站建设 
简介一份关于使用Canvas绘制动态心电图的完整示例与讲解材料面向Web前端开发者、医疗数据可视化学习者帮助在浏览器中实现类似监护仪的心电波形实时展示。内容涵盖Canvas基础绘图操作、ECG数据点坐标换算、定时刷新机制以及线条平滑处理并结合实际数据异常与性能优化问题给出思路。资源包共7个文件以HTML页面、JavaScript脚本、CSS样式和txt说明为主体积仅41KB其中ecgcanvas.js为绘图核心代码配合页面即可快速运行体验。目前已有3002人学习下载适合希望掌握H5动态图形渲染或健康数据可视化技巧的读者参考。通过本材料可收获一个可直接运行的示例、关键绘图逻辑的代码参考以及从数据到坐标映射再到动态刷新的完整实现链路便于在此基础上扩展真实生理数据的接入。1. 从 canvas 心电图说起为什么医院波形能直接搬进网页第一次看到用 canvas 绘制动态心电图的需求我以为是做医疗大屏展示后来发现场景居然是前端页面里的实时波形模拟。HTML5 Canvas 本身就是为这种连续、高频的图形更新设计的心电图这种“一条线不断向右滚动”的场景恰好能把 Canvas 2D 的坐标变换、帧循环、增量绘制全部串起来。这篇实战笔记会从画布初始化一路写到波形成型、告警闪烁和排坑代码可以直接跑参数按自己的数据改就行。适合刚接触 canvas 绘图、或者想把手头静态波形改成动态效果的前端开发者也适合需要做监护仪类 UI 原型的人。2. Canvas 2D 绘图基础坐标系、高清适配与网格绘制2.1 初始化画布分不清 devicePixelRatio 就会糊先说明一个容易翻车的点canvas 的 width 和 height 属性是绘图缓冲区尺寸而 CSS 里的 width 和 height 是元素显示尺寸。绝大多数 canvas 绘图教程只设置 CSS 尺寸在普通屏幕上看着还行一旦放到高分屏devicePixelRatio 为 2 或更高波形边界立刻发虚因为缓冲区像素不够浏览器强行放大导致模糊。我一般会这样初始化const canvas document.getElementById(ecg); const ctx canvas.getContext(2d); const dpr window.devicePixelRatio || 1; // 用 CSS 尺寸作为逻辑尺寸 const cssWidth canvas.clientWidth; const cssHeight canvas.clientHeight; canvas.width Math.floor(cssWidth * dpr); canvas.height Math.floor(cssHeight * dpr); canvas.style.width cssWidth px; canvas.style.height cssHeight px; ctx.setTransform(dpr, 0, 0, dpr, 0, 0);这段代码的核心操作是先读 CSS 尺寸再按 dpr 放大缓冲区最后用 setTransform 把坐标系拉回逻辑尺寸。这样后续所有绘图代码都按照 CSS 像素来写不用每次画线都乘一个缩放系数。注意 setTransform 要放在绘制之前调用而且不要在绘制过程中反复调用否则会覆盖掉之前的 transform 状态。如果是在 Vue 2 项目里用 canvas 2d这套初始化逻辑要放在 mounted 之后、拿到真实 DOM 尺寸时执行不要在 created 里读 clientWidth那时候元素还没挂载拿到的宽度是 0。另一个细节是窗口尺寸变化时要重新执行一次这个初始化并在 resize 事件里做防抖不然拖动窗口边框时波形会变形。2.2 网格与刻度把毫米纸搬进 HTML5心电图波形不是画在空白背景上的底部需要网格来表现时间轴和幅值参考。医院心电图纸的网格是 1mm 小格、5mm 大格放到网页里我习惯用逻辑像素模拟小格间距 20px大格间距 100px。网格线用半透明绿色既能看清波形又不会喧宾夺主。function drawGrid(ctx, width, height, step 20, majorStep 5) { ctx.save(); ctx.strokeStyle rgba(34, 139, 34, 0.15); ctx.lineWidth 1; ctx.beginPath(); for (let x 0; x width; x step) { ctx.moveTo(x, 0); ctx.lineTo(x, height); } for (let y 0; y height; y step) { ctx.moveTo(0, y); ctx.lineTo(width, y); } ctx.stroke(); ctx.strokeStyle rgba(34, 139, 34, 0.35); ctx.beginPath(); for (let x 0; x width; x step * majorStep) { ctx.moveTo(x, 0); ctx.lineTo(x, height); } for (let y 0; y height; y step * majorStep) { ctx.moveTo(0, y); ctx.lineTo(width, y); } ctx.stroke(); ctx.restore(); }drawGrid 的逻辑很直白先画细网格再画粗网格。save 和 restore 确保网格线的样式不会污染后面波形绘制的 strokeStyle。注意这里我用的是 moveTo 加 lineTo 的批量绘制而不是每个网格单独 stroke这样所有线段只需要一次 ctx.stroke() 调用性能差距在小网格数量多时非常明显。参数说明step 控制小格间距majorStep 控制每隔几个小格画一条加粗线。如果做护理记录类页面step 可以调到 25px视觉更疏松如果做模拟监护仪20px 更接近原版纸感。网格绘制在动态场景里有一个优化空间——它每一帧都在重复绘制相同的静态内容后文会讲到用离屏 canvas 缓存这里先不展开。3. 动态绘制心电图requestAnimationFrame 驱动与滚动策略3.1 实时数据流数组滚动与缓冲策略心电图的动态效果本质上是一条不断向右推进的折线数据源是实时采样的波形值。前端模拟时通常有两种做法一种是每帧生成一个新数据点并绘制全量折线另一种是用环形缓冲区维护最近 N 个点只绘制窗口内的数据。我倾向于第二种因为心电波形只看最近一段就有判断价值全量数据保留在内存里既浪费又拖慢绘制。核心数据结构就是一个定长数组const BUFFER_SIZE 600; const buffer new Array(BUFFER_SIZE).fill(0); let writeIndex 0; function pushSample(value) { buffer[writeIndex] value; writeIndex (writeIndex 1) % BUFFER_SIZE; }这里 writeIndex 用取模的方式实现环形覆盖避免 shift 操作。有人习惯用 Array.prototype.shift 每帧移除头部元素但 shift 的时间复杂度是 O(n)600 个元素时感知不明显数据量到几千之后垃圾回收压力会明显变大。环形缓冲区没有元素移动只是覆盖旧值这对高频采样非常友好。数据进 buffer 之前最好做一次限幅滤波。真实心电信号偶尔会有毛刺直接画出来会看到尖锐的跳变影响观感。常见的做法是设置相邻采样点最大变化量function filterSample(current, previous, maxDelta 8) { const delta current - previous; if (Math.abs(delta) maxDelta) { return previous Math.sign(delta) * maxDelta; } return current; }filterSample 的作用是限制瞬时变化幅度让波形更接近真实心电的平滑上升和下降。maxDelta 要根据波形幅值和采样间隔调整我模拟 50Hz 采样时用的 8px如果采样率提高到 100Hz这个值可以压到 4px 左右。3.2 波形平滑滚动按像素步进而不是按点重绘绘制动态波形有两种主流方式一种是每帧把整条折线重新画一遍波形看起来在跳动适合数据量小、变化剧烈的场景另一种是画布整体左移一个固定像素然后只在右侧画新数据这是心电图最经典的做法画出来的波形像纸带一样平滑滚动。第一种实现简单但不适合心电图因为整条线重画会导致波形位置随着数据长度不断压缩视觉节奏不对。第二种的核心思路是每次更新时先做一次平移再补新点。const PIXEL_STEP 2; // 每帧右移速度单位 px const baselineY 200; // 波形基线位置 function shiftCanvasAndDraw(ctx, width) { // 把已有内容向左平移 PIXEL_STEP 像素 ctx.drawImage(canvas, -PIXEL_STEP, 0); // 平移后右侧边缘有 PIXEL_STEP 宽度的空白带用背景色补掉 ctx.fillStyle #000; ctx.fillRect(width - PIXEL_STEP, 0, PIXEL_STEP, canvas.height); // 最后把新采样点接到最右侧 drawNewSegment(ctx, width); }drawImage(canvas, -PIXEL_STEP, 0) 是整个动态绘制的灵魂它把当前画布内容作为图像源整体向左移动代价是复制像素但比逐点重绘快得多。平移方向注意是负值代表波形向左滚动。移动之后右侧会出现一条竖着的空白带必须先补成背景色否则会留下上一帧的残影。最后 drawNewSegment 只负责画最后两三个点的连线工作量极小。PIXEL_STEP 的值直接决定滚动快慢。医学心电图的走纸速度一般是 25mm/s网页里我习惯映射成 2px/帧。如果你用 requestAnimationFrame 以 60fps 运行那就是每秒 120px大约 5 秒走完一个 600px 宽的窗口视觉节奏接近真实监护仪。想要更快可以调到 3 或 4但太快会让 PQRST 波形被人眼压扁反而不好观察细节。4. 从简单到逼真PQRST 波、告警闪烁与事件标注4.1 用分段函数模拟 PQRST 波形如果你用手头真实的心电数据文件直接读数据就能画。但做原型、演示或者给测试环境造数据时手头往往没有现成数据这时候就需要自己生成模拟波形。心电波形的特征是 P 波、QRS 波群、T 波三段分别对应不同的幅值和持续时间。我常用分段函数模拟一次完整心跳。function ecgWaveform(phase) { // phase 范围 0 ~ 1代表一次心跳的完整周期 if (phase 0.1) { // P 波小幅圆顶波 return -12 * Math.sin((phase / 0.1) * Math.PI); } else if (phase 0.2) { // P-R 段平直基线 return 0; } else if (phase 0.23) { // Q 波短促向下 return -30 * Math.sin(((phase - 0.2) / 0.03) * Math.PI); } else if (phase 0.30) { // R 波主峰幅值最高 return 80 * Math.sin(((phase - 0.23) / 0.07) * Math.PI); } else if (phase 0.34) { // S 波向下回弹 return -40 * Math.sin(((phase - 0.30) / 0.04) * Math.PI); } else if (phase 0.47) { // S-T 段接近基线 return 4; } else if (phase 0.60) { // T 波较宽的低幅波 return 25 * Math.sin(((phase - 0.47) / 0.13) * Math.PI); } return 0; }ecgWaveform 返回的是相对基线的偏移值单位是像素。把这个函数输出加上 baselineY再推进 phase就能得到一条完整的心电折线。R 波幅值设为 80px在 600px 高的画布里是视觉冲击力最强的比例如果页面高度只有 300px幅值要压到 50px 左右否则波形会触到画布顶部。为什么用分段正弦而不是直接拼一个正弦波因为心电图的每一段持续时间不一样R 波极窄、T 波很宽用分段函数可以分别控制每段的时长和幅值拼出形态上“像那么回事”的波形。真实心电图的形态比这个复杂但做前端展示这个精度已经够了。4.2 告警闪烁与事件标注状态驱动的视觉反馈动态心电图不只是画一条线多数场景还需要在心率异常时做告警提示。比如心率超过 120 或低于 50波形边框要变红并且闪烁同时在波形上方标注一个“HR: 145”的事件点。实现起来不复杂关键是别把状态判断写在绘制函数里尽量抽成独立的状态对象。const monitorState { heartRate: 75, isAlert: false, alertStartTime: 0, alertType: null }; function updateHeartRate(newRate) { monitorState.heartRate newRate; const prevAlert monitorState.isAlert; monitorState.isAlert newRate 120 || newRate 50; if (monitorState.isAlert !prevAlert) { monitorState.alertStartTime performance.now(); monitorState.alertType newRate 120 ? tachycardia : bradycardia; } }告警状态和外层 UI 联动时我会在每次绘制前检查当前时间和 alertStartTime 的差值用正弦波做透明度闪烁。闪烁频率一般用 2Hz也就是每 500ms 一个亮暗周期。事件标注的绘制位置需要稳定不能让文字跟着波形滚出屏幕。常见做法是固定在画布右上角显示实时心率告警时在波形上画一个三角标记并用小字体显示事件时间。注意保存绘制状态事件文字绘制结束后要恢复之前的 fillStyle不然下一次画波形线时颜色会被覆盖。5. 常见问题与排查Canvas 心电图的五个现场5.1 画布模糊高分屏适配失效现象在 MacBook 上打开页面波形边缘明显发虚网格线粗细不均但同一段代码在普通显示器上正常。原因canvas.width 和 canvas.height 没有乘以 devicePixelRatio。浏览器在高分屏上用物理像素渲染画布缓冲区像素不足时图形被插值放大自然就糊了。解决按 2.1 节的方式初始化时读取 dpr把 canvas.width 设为 CSS 宽度乘 dpr然后 setTransform(dpr, 0, 0, dpr, 0, 0)。这里最容易忘的一步是设置 canvas.style.width 和 height如果漏了画布的实际 CSS 尺寸会变成缓冲区的物理像素尺寸布局直接崩掉。5.2 波形卡顿每帧全量重绘网格现象波形本身流畅但页面整体掉帧CPU 占用率极高尤其画布尺寸超过 1000px 时明显。原因每个 requestAnimationFrame 回调里既画网格又画波形网格线几十上百条每条线都走一次 beginPath 和 stroke相当于每帧多了上百次 Canvas 绘图指令调用。解决把静态网格画到离屏 canvas 上动态帧只执行 drawImage 把网格背景贴回来然后叠加波形。实测在 1440 宽的画布上这个改动能让单帧绘制耗时从 8ms 降到 2ms 左右。代码在后文优化章节给出这里先记住原则Canvas 的 beginPath 和 stroke 调用次数是性能敏感项能合并就合并能缓存就缓存。5.3 canvas 的动态绘制和 Vue 组件更新互相打架现象在 Vue 2 组件里用 canvas 绘制心电图页面其他数据更新时波形会闪烁或者突然被清空控制台偶尔报错说 canvas 上下文状态异常。原因组件重新渲染时Vue 可能复用了 canvas 节点但旧的 requestAnimationFrame 循环还在跑新旧循环都在往同一个 canvas 上绘制。另一个常见原因是组件销毁时没有取消动画帧循环泄漏到下一个组件实例上。解决在组件销毁前用 cancelAnimationFrame 取消动画循环同时把绘制循环绑定到组件实例自己的引用上。如果是 Vue 3注意在 onBeforeUnmount 里清理如果是 React在 useEffect 的 cleanup 里做同样的事。Canvas 生命周期必须和组件生命周期对齐否则会出现画了一半的波形图。5.4 波形出现锯齿和断裂坐标取整问题现象波形线条不平滑出现阶梯状锯齿偶尔在点与点之间看到短线断裂波形像是拼在一起的碎线段。原因绘制折线时用了浮点坐标Canvas 在渲染时需要对非整数坐标做抗锯齿处理处理不好就会产生模糊或者断裂。另一个原因是相邻两个点在 x 方向上的间距小于 1px导致线段几乎垂直视觉上变成断裂。解决绘制之前对坐标做取整处理或者用 ctx.translate(0.5, 0.5) 让线条中心对齐到像素网格。对于心电图这种以竖直线为主的图形取整效果好于抗锯齿推荐在绘制循环入口一次性做取整。注意取整时保留数据原始值只在渲染层面处理不要影响数据分析。5.5 内存持续上涨事件监听和缓冲数组泄漏现象页面长时间运行后内存占用持续攀升切换页面再回来后内存不释放最终导致浏览器卡死。原因最典型的两个泄漏源一是 resize 事件监听器在每次绑定后没有解绑累积了多个回调二是 buffer 数组无限增长——比如你用了 push 而不是环形覆盖采样点越来越多Canvas 每次要重绘越来越长的折线。解决用环形缓冲固定数据长度resize 监听器绑定到同一个具名函数需要解绑时引用同一个函数如果使用离屏 canvas 缓存网格记得在组件销毁时释放引用。检查内存最简单的方式是打开 Chrome 的 Performance 面板录制一段观察内存曲线是否持续上升而不回落。6. 把波形调到能用离屏 canvas、性能监测与自检清单6.1 离屏 canvas 缓存静态网格前文提到网格线每帧重绘是性能瓶颈这里直接给出缓存的完整做法。离屏 canvas 不挂在 DOM 上只在内存里绘制一次之后每帧通过 drawImage 贴回主画布。function createBackgroundPattern(cssWidth, cssHeight, dpr, step 20) { const offscreen document.createElement(canvas); offscreen.width cssWidth * dpr; offscreen.height cssHeight * dpr; const offCtx offscreen.getContext(2d); offCtx.setTransform(dpr, 0, 0, dpr, 0, 0); drawGrid(offCtx, cssWidth, cssHeight, step); return offscreen; } // 在动画循环里使用 const bgPattern createBackgroundPattern(800, 400, window.devicePixelRatio); function renderFrame() { ctx.drawImage(bgPattern, 0, 0); // 继续绘制波形 }createBackgroundPattern 返回一个完整绘制好网格的 canvas 对象。每帧动画开始时 drawImage 一次毫秒级完成比重复绘制网格线快一个数量级。离屏 canvas 的尺寸要和主画布保持一致包括 dpr 的处理否则贴图时会出现模糊或位置偏移。注意离屏 canvas 一旦创建尺寸变化时要重建。如果页面支持窗口缩放在 resize 回调里除了重置主画布也要重建背景图案否则网格大小不会跟着画布尺寸变化。6.2 自检清单与验证方法在交付之前我会强制走一遍完整的验证流程。这套流程能帮你发现问题也能在代码评审时快速证明动态波形逻辑是完整的。第一检查画布自适应拖动窗口改变画布尺寸波形应该随即缩放且不模糊。第二观察滚动连续性波形左移时右侧新点应该平滑衔接不出现跳变或残影。第三模拟数据中断暂停采样 3 秒波形右侧应该停止推进或出现平线而不是继续画乱码。第四验证告警联动把心率阈值临时调低触发告警后边框闪烁和事件标注应该同步出现。第五审查性能打开 Performance 面板确认单帧绘制耗时在 3ms 以下长时间运行内存曲线平缓。验证过程中我最常抓到的 bug 是波形推进和心率更新的节奏不一致。比如采样频率是 60Hz动画循环是 60fps看起来匹配但 buffer 的长度是 600 个点画布宽度是 800px波形会在一秒内走完整个窗口然后重头开始视觉上出现一次跳变。这个问题很隐蔽本质是数据速率和像素速率的换算没有对齐需要把 PIXEL_STEP、采样频率和画布宽度放在同一个公式里校验像素速度 采样率 × PIXEL_STEP / (每像素样本数)三者必须满足匀速关系。做一个稳健的心电图绘制不是难在画线而是难在数据流、渲染节奏和组件生命周期三者不打架。从那以后我每次接到 canvas 实时绘图的活都会强制先画一版静态效果图确认网格、基线、波形形态都过了再接入动画循环——静态建模过关动态实现才有参照系否则很容易在调参的路上越走越偏。希望这份笔记对你手头的 canvas 心电图项目有点用。本文还有配套的精品资源点击获取 Canvas 2D实战：动态心电图绘制与性能优化全解析
简介一份关于使用Canvas绘制动态心电图的完整示例与讲解材料面向Web前端开发者、医疗数据可视化学习者帮助在浏览器中实现类似监护仪的心电波形实时展示。内容涵盖Canvas基础绘图操作、ECG数据点坐标换算、定时刷新机制以及线条平滑处理并结合实际数据异常与性能优化问题给出思路。资源包共7个文件以HTML页面、JavaScript脚本、CSS样式和txt说明为主体积仅41KB其中ecgcanvas.js为绘图核心代码配合页面即可快速运行体验。目前已有3002人学习下载适合希望掌握H5动态图形渲染或健康数据可视化技巧的读者参考。通过本材料可收获一个可直接运行的示例、关键绘图逻辑的代码参考以及从数据到坐标映射再到动态刷新的完整实现链路便于在此基础上扩展真实生理数据的接入。1. 从 canvas 心电图说起为什么医院波形能直接搬进网页第一次看到用 canvas 绘制动态心电图的需求我以为是做医疗大屏展示后来发现场景居然是前端页面里的实时波形模拟。HTML5 Canvas 本身就是为这种连续、高频的图形更新设计的心电图这种“一条线不断向右滚动”的场景恰好能把 Canvas 2D 的坐标变换、帧循环、增量绘制全部串起来。这篇实战笔记会从画布初始化一路写到波形成型、告警闪烁和排坑代码可以直接跑参数按自己的数据改就行。适合刚接触 canvas 绘图、或者想把手头静态波形改成动态效果的前端开发者也适合需要做监护仪类 UI 原型的人。2. Canvas 2D 绘图基础坐标系、高清适配与网格绘制2.1 初始化画布分不清 devicePixelRatio 就会糊先说明一个容易翻车的点canvas 的 width 和 height 属性是绘图缓冲区尺寸而 CSS 里的 width 和 height 是元素显示尺寸。绝大多数 canvas 绘图教程只设置 CSS 尺寸在普通屏幕上看着还行一旦放到高分屏devicePixelRatio 为 2 或更高波形边界立刻发虚因为缓冲区像素不够浏览器强行放大导致模糊。我一般会这样初始化const canvas document.getElementById(ecg); const ctx canvas.getContext(2d); const dpr window.devicePixelRatio || 1; // 用 CSS 尺寸作为逻辑尺寸 const cssWidth canvas.clientWidth; const cssHeight canvas.clientHeight; canvas.width Math.floor(cssWidth * dpr); canvas.height Math.floor(cssHeight * dpr); canvas.style.width cssWidth px; canvas.style.height cssHeight px; ctx.setTransform(dpr, 0, 0, dpr, 0, 0);这段代码的核心操作是先读 CSS 尺寸再按 dpr 放大缓冲区最后用 setTransform 把坐标系拉回逻辑尺寸。这样后续所有绘图代码都按照 CSS 像素来写不用每次画线都乘一个缩放系数。注意 setTransform 要放在绘制之前调用而且不要在绘制过程中反复调用否则会覆盖掉之前的 transform 状态。如果是在 Vue 2 项目里用 canvas 2d这套初始化逻辑要放在 mounted 之后、拿到真实 DOM 尺寸时执行不要在 created 里读 clientWidth那时候元素还没挂载拿到的宽度是 0。另一个细节是窗口尺寸变化时要重新执行一次这个初始化并在 resize 事件里做防抖不然拖动窗口边框时波形会变形。2.2 网格与刻度把毫米纸搬进 HTML5心电图波形不是画在空白背景上的底部需要网格来表现时间轴和幅值参考。医院心电图纸的网格是 1mm 小格、5mm 大格放到网页里我习惯用逻辑像素模拟小格间距 20px大格间距 100px。网格线用半透明绿色既能看清波形又不会喧宾夺主。function drawGrid(ctx, width, height, step 20, majorStep 5) { ctx.save(); ctx.strokeStyle rgba(34, 139, 34, 0.15); ctx.lineWidth 1; ctx.beginPath(); for (let x 0; x width; x step) { ctx.moveTo(x, 0); ctx.lineTo(x, height); } for (let y 0; y height; y step) { ctx.moveTo(0, y); ctx.lineTo(width, y); } ctx.stroke(); ctx.strokeStyle rgba(34, 139, 34, 0.35); ctx.beginPath(); for (let x 0; x width; x step * majorStep) { ctx.moveTo(x, 0); ctx.lineTo(x, height); } for (let y 0; y height; y step * majorStep) { ctx.moveTo(0, y); ctx.lineTo(width, y); } ctx.stroke(); ctx.restore(); }drawGrid 的逻辑很直白先画细网格再画粗网格。save 和 restore 确保网格线的样式不会污染后面波形绘制的 strokeStyle。注意这里我用的是 moveTo 加 lineTo 的批量绘制而不是每个网格单独 stroke这样所有线段只需要一次 ctx.stroke() 调用性能差距在小网格数量多时非常明显。参数说明step 控制小格间距majorStep 控制每隔几个小格画一条加粗线。如果做护理记录类页面step 可以调到 25px视觉更疏松如果做模拟监护仪20px 更接近原版纸感。网格绘制在动态场景里有一个优化空间——它每一帧都在重复绘制相同的静态内容后文会讲到用离屏 canvas 缓存这里先不展开。3. 动态绘制心电图requestAnimationFrame 驱动与滚动策略3.1 实时数据流数组滚动与缓冲策略心电图的动态效果本质上是一条不断向右推进的折线数据源是实时采样的波形值。前端模拟时通常有两种做法一种是每帧生成一个新数据点并绘制全量折线另一种是用环形缓冲区维护最近 N 个点只绘制窗口内的数据。我倾向于第二种因为心电波形只看最近一段就有判断价值全量数据保留在内存里既浪费又拖慢绘制。核心数据结构就是一个定长数组const BUFFER_SIZE 600; const buffer new Array(BUFFER_SIZE).fill(0); let writeIndex 0; function pushSample(value) { buffer[writeIndex] value; writeIndex (writeIndex 1) % BUFFER_SIZE; }这里 writeIndex 用取模的方式实现环形覆盖避免 shift 操作。有人习惯用 Array.prototype.shift 每帧移除头部元素但 shift 的时间复杂度是 O(n)600 个元素时感知不明显数据量到几千之后垃圾回收压力会明显变大。环形缓冲区没有元素移动只是覆盖旧值这对高频采样非常友好。数据进 buffer 之前最好做一次限幅滤波。真实心电信号偶尔会有毛刺直接画出来会看到尖锐的跳变影响观感。常见的做法是设置相邻采样点最大变化量function filterSample(current, previous, maxDelta 8) { const delta current - previous; if (Math.abs(delta) maxDelta) { return previous Math.sign(delta) * maxDelta; } return current; }filterSample 的作用是限制瞬时变化幅度让波形更接近真实心电的平滑上升和下降。maxDelta 要根据波形幅值和采样间隔调整我模拟 50Hz 采样时用的 8px如果采样率提高到 100Hz这个值可以压到 4px 左右。3.2 波形平滑滚动按像素步进而不是按点重绘绘制动态波形有两种主流方式一种是每帧把整条折线重新画一遍波形看起来在跳动适合数据量小、变化剧烈的场景另一种是画布整体左移一个固定像素然后只在右侧画新数据这是心电图最经典的做法画出来的波形像纸带一样平滑滚动。第一种实现简单但不适合心电图因为整条线重画会导致波形位置随着数据长度不断压缩视觉节奏不对。第二种的核心思路是每次更新时先做一次平移再补新点。const PIXEL_STEP 2; // 每帧右移速度单位 px const baselineY 200; // 波形基线位置 function shiftCanvasAndDraw(ctx, width) { // 把已有内容向左平移 PIXEL_STEP 像素 ctx.drawImage(canvas, -PIXEL_STEP, 0); // 平移后右侧边缘有 PIXEL_STEP 宽度的空白带用背景色补掉 ctx.fillStyle #000; ctx.fillRect(width - PIXEL_STEP, 0, PIXEL_STEP, canvas.height); // 最后把新采样点接到最右侧 drawNewSegment(ctx, width); }drawImage(canvas, -PIXEL_STEP, 0) 是整个动态绘制的灵魂它把当前画布内容作为图像源整体向左移动代价是复制像素但比逐点重绘快得多。平移方向注意是负值代表波形向左滚动。移动之后右侧会出现一条竖着的空白带必须先补成背景色否则会留下上一帧的残影。最后 drawNewSegment 只负责画最后两三个点的连线工作量极小。PIXEL_STEP 的值直接决定滚动快慢。医学心电图的走纸速度一般是 25mm/s网页里我习惯映射成 2px/帧。如果你用 requestAnimationFrame 以 60fps 运行那就是每秒 120px大约 5 秒走完一个 600px 宽的窗口视觉节奏接近真实监护仪。想要更快可以调到 3 或 4但太快会让 PQRST 波形被人眼压扁反而不好观察细节。4. 从简单到逼真PQRST 波、告警闪烁与事件标注4.1 用分段函数模拟 PQRST 波形如果你用手头真实的心电数据文件直接读数据就能画。但做原型、演示或者给测试环境造数据时手头往往没有现成数据这时候就需要自己生成模拟波形。心电波形的特征是 P 波、QRS 波群、T 波三段分别对应不同的幅值和持续时间。我常用分段函数模拟一次完整心跳。function ecgWaveform(phase) { // phase 范围 0 ~ 1代表一次心跳的完整周期 if (phase 0.1) { // P 波小幅圆顶波 return -12 * Math.sin((phase / 0.1) * Math.PI); } else if (phase 0.2) { // P-R 段平直基线 return 0; } else if (phase 0.23) { // Q 波短促向下 return -30 * Math.sin(((phase - 0.2) / 0.03) * Math.PI); } else if (phase 0.30) { // R 波主峰幅值最高 return 80 * Math.sin(((phase - 0.23) / 0.07) * Math.PI); } else if (phase 0.34) { // S 波向下回弹 return -40 * Math.sin(((phase - 0.30) / 0.04) * Math.PI); } else if (phase 0.47) { // S-T 段接近基线 return 4; } else if (phase 0.60) { // T 波较宽的低幅波 return 25 * Math.sin(((phase - 0.47) / 0.13) * Math.PI); } return 0; }ecgWaveform 返回的是相对基线的偏移值单位是像素。把这个函数输出加上 baselineY再推进 phase就能得到一条完整的心电折线。R 波幅值设为 80px在 600px 高的画布里是视觉冲击力最强的比例如果页面高度只有 300px幅值要压到 50px 左右否则波形会触到画布顶部。为什么用分段正弦而不是直接拼一个正弦波因为心电图的每一段持续时间不一样R 波极窄、T 波很宽用分段函数可以分别控制每段的时长和幅值拼出形态上“像那么回事”的波形。真实心电图的形态比这个复杂但做前端展示这个精度已经够了。4.2 告警闪烁与事件标注状态驱动的视觉反馈动态心电图不只是画一条线多数场景还需要在心率异常时做告警提示。比如心率超过 120 或低于 50波形边框要变红并且闪烁同时在波形上方标注一个“HR: 145”的事件点。实现起来不复杂关键是别把状态判断写在绘制函数里尽量抽成独立的状态对象。const monitorState { heartRate: 75, isAlert: false, alertStartTime: 0, alertType: null }; function updateHeartRate(newRate) { monitorState.heartRate newRate; const prevAlert monitorState.isAlert; monitorState.isAlert newRate 120 || newRate 50; if (monitorState.isAlert !prevAlert) { monitorState.alertStartTime performance.now(); monitorState.alertType newRate 120 ? tachycardia : bradycardia; } }告警状态和外层 UI 联动时我会在每次绘制前检查当前时间和 alertStartTime 的差值用正弦波做透明度闪烁。闪烁频率一般用 2Hz也就是每 500ms 一个亮暗周期。事件标注的绘制位置需要稳定不能让文字跟着波形滚出屏幕。常见做法是固定在画布右上角显示实时心率告警时在波形上画一个三角标记并用小字体显示事件时间。注意保存绘制状态事件文字绘制结束后要恢复之前的 fillStyle不然下一次画波形线时颜色会被覆盖。5. 常见问题与排查Canvas 心电图的五个现场5.1 画布模糊高分屏适配失效现象在 MacBook 上打开页面波形边缘明显发虚网格线粗细不均但同一段代码在普通显示器上正常。原因canvas.width 和 canvas.height 没有乘以 devicePixelRatio。浏览器在高分屏上用物理像素渲染画布缓冲区像素不足时图形被插值放大自然就糊了。解决按 2.1 节的方式初始化时读取 dpr把 canvas.width 设为 CSS 宽度乘 dpr然后 setTransform(dpr, 0, 0, dpr, 0, 0)。这里最容易忘的一步是设置 canvas.style.width 和 height如果漏了画布的实际 CSS 尺寸会变成缓冲区的物理像素尺寸布局直接崩掉。5.2 波形卡顿每帧全量重绘网格现象波形本身流畅但页面整体掉帧CPU 占用率极高尤其画布尺寸超过 1000px 时明显。原因每个 requestAnimationFrame 回调里既画网格又画波形网格线几十上百条每条线都走一次 beginPath 和 stroke相当于每帧多了上百次 Canvas 绘图指令调用。解决把静态网格画到离屏 canvas 上动态帧只执行 drawImage 把网格背景贴回来然后叠加波形。实测在 1440 宽的画布上这个改动能让单帧绘制耗时从 8ms 降到 2ms 左右。代码在后文优化章节给出这里先记住原则Canvas 的 beginPath 和 stroke 调用次数是性能敏感项能合并就合并能缓存就缓存。5.3 canvas 的动态绘制和 Vue 组件更新互相打架现象在 Vue 2 组件里用 canvas 绘制心电图页面其他数据更新时波形会闪烁或者突然被清空控制台偶尔报错说 canvas 上下文状态异常。原因组件重新渲染时Vue 可能复用了 canvas 节点但旧的 requestAnimationFrame 循环还在跑新旧循环都在往同一个 canvas 上绘制。另一个常见原因是组件销毁时没有取消动画帧循环泄漏到下一个组件实例上。解决在组件销毁前用 cancelAnimationFrame 取消动画循环同时把绘制循环绑定到组件实例自己的引用上。如果是 Vue 3注意在 onBeforeUnmount 里清理如果是 React在 useEffect 的 cleanup 里做同样的事。Canvas 生命周期必须和组件生命周期对齐否则会出现画了一半的波形图。5.4 波形出现锯齿和断裂坐标取整问题现象波形线条不平滑出现阶梯状锯齿偶尔在点与点之间看到短线断裂波形像是拼在一起的碎线段。原因绘制折线时用了浮点坐标Canvas 在渲染时需要对非整数坐标做抗锯齿处理处理不好就会产生模糊或者断裂。另一个原因是相邻两个点在 x 方向上的间距小于 1px导致线段几乎垂直视觉上变成断裂。解决绘制之前对坐标做取整处理或者用 ctx.translate(0.5, 0.5) 让线条中心对齐到像素网格。对于心电图这种以竖直线为主的图形取整效果好于抗锯齿推荐在绘制循环入口一次性做取整。注意取整时保留数据原始值只在渲染层面处理不要影响数据分析。5.5 内存持续上涨事件监听和缓冲数组泄漏现象页面长时间运行后内存占用持续攀升切换页面再回来后内存不释放最终导致浏览器卡死。原因最典型的两个泄漏源一是 resize 事件监听器在每次绑定后没有解绑累积了多个回调二是 buffer 数组无限增长——比如你用了 push 而不是环形覆盖采样点越来越多Canvas 每次要重绘越来越长的折线。解决用环形缓冲固定数据长度resize 监听器绑定到同一个具名函数需要解绑时引用同一个函数如果使用离屏 canvas 缓存网格记得在组件销毁时释放引用。检查内存最简单的方式是打开 Chrome 的 Performance 面板录制一段观察内存曲线是否持续上升而不回落。6. 把波形调到能用离屏 canvas、性能监测与自检清单6.1 离屏 canvas 缓存静态网格前文提到网格线每帧重绘是性能瓶颈这里直接给出缓存的完整做法。离屏 canvas 不挂在 DOM 上只在内存里绘制一次之后每帧通过 drawImage 贴回主画布。function createBackgroundPattern(cssWidth, cssHeight, dpr, step 20) { const offscreen document.createElement(canvas); offscreen.width cssWidth * dpr; offscreen.height cssHeight * dpr; const offCtx offscreen.getContext(2d); offCtx.setTransform(dpr, 0, 0, dpr, 0, 0); drawGrid(offCtx, cssWidth, cssHeight, step); return offscreen; } // 在动画循环里使用 const bgPattern createBackgroundPattern(800, 400, window.devicePixelRatio); function renderFrame() { ctx.drawImage(bgPattern, 0, 0); // 继续绘制波形 }createBackgroundPattern 返回一个完整绘制好网格的 canvas 对象。每帧动画开始时 drawImage 一次毫秒级完成比重复绘制网格线快一个数量级。离屏 canvas 的尺寸要和主画布保持一致包括 dpr 的处理否则贴图时会出现模糊或位置偏移。注意离屏 canvas 一旦创建尺寸变化时要重建。如果页面支持窗口缩放在 resize 回调里除了重置主画布也要重建背景图案否则网格大小不会跟着画布尺寸变化。6.2 自检清单与验证方法在交付之前我会强制走一遍完整的验证流程。这套流程能帮你发现问题也能在代码评审时快速证明动态波形逻辑是完整的。第一检查画布自适应拖动窗口改变画布尺寸波形应该随即缩放且不模糊。第二观察滚动连续性波形左移时右侧新点应该平滑衔接不出现跳变或残影。第三模拟数据中断暂停采样 3 秒波形右侧应该停止推进或出现平线而不是继续画乱码。第四验证告警联动把心率阈值临时调低触发告警后边框闪烁和事件标注应该同步出现。第五审查性能打开 Performance 面板确认单帧绘制耗时在 3ms 以下长时间运行内存曲线平缓。验证过程中我最常抓到的 bug 是波形推进和心率更新的节奏不一致。比如采样频率是 60Hz动画循环是 60fps看起来匹配但 buffer 的长度是 600 个点画布宽度是 800px波形会在一秒内走完整个窗口然后重头开始视觉上出现一次跳变。这个问题很隐蔽本质是数据速率和像素速率的换算没有对齐需要把 PIXEL_STEP、采样频率和画布宽度放在同一个公式里校验像素速度 采样率 × PIXEL_STEP / (每像素样本数)三者必须满足匀速关系。做一个稳健的心电图绘制不是难在画线而是难在数据流、渲染节奏和组件生命周期三者不打架。从那以后我每次接到 canvas 实时绘图的活都会强制先画一版静态效果图确认网格、基线、波形形态都过了再接入动画循环——静态建模过关动态实现才有参照系否则很容易在调参的路上越走越偏。希望这份笔记对你手头的 canvas 心电图项目有点用。本文还有配套的精品资源点击获取