许多前端项目都能简单地用canvas.lineTo画出一条曲线。但如果想把真实采样绘制成可读、可缩放、比例正确的心电图纸，细节远比单纯绘制更复杂。是当你拿到的数据并非直接可视化时会出现以下痛点：

• 数据单位不一致不同采集设备输出可能是毫伏、ADC整数或带偏移量的数据；若直接将其当作像素高度绘制，波形会失真。
• 比例参数误差速度和增益决定时间与电压比例。一旦设置错误，即使波形看似正常，也会导致时间轴和电压轴意义完全错误。
• 缺乏统一渲染框架手动实现网格、缩放、拖拽等功能既耗时又易出错，难以复用。

h5ECG 就是为了解决这些痛点而诞生的一个框架无关 ECG Canvas 渲染库。它提供了原生、React 和 Vue 三种入口，并封装好网格、波形渲染、缩放拖拽、导联排版还有测量尺等功能；怎么说呢，你只需要准备自己的采样数据即可。

不同采集设备输出的数据并不相同。有些设备直接给毫伏，有些给 ADC 整数值，还有些带偏移量。h5ECG 默认按本仓库示例的标定理解输入：

• 基线 adcBaseline:
• 换算系数 adcUnitsPerMv:

即  ADC units = mV

一串类似的数据不是直接拿来当像素高度。而是先换算为 mV，再按增益绘制。如果你的设备参数不同，请务必覆盖这两个选项；比例错了波形看似正常，时间和电压含义却已经不对了。

安装的观点是，npm 或 GitHub 都可以

优先使用 npm：

npm install h5ecg

如果你希望直接依赖源码仓库。也可以固定到已发布版本：

npm install github:dongweiq/h5ecg#v0.

固定 tag 而不是分支名，是为了让团队建立更稳定、结果更可复现。

最小可用示例这方面，在页面上画出一条自己的波形

页面里准备一个有高度的容器：

再把你自己的单导联数据传入：

import { EcgCanvas } from 'h5ecg';const samples = `
2025
2038
2040
`;const viewer = new EcgCanvas!{
mode这方面，'12x1',speed: 25,// mm / s → 每个小格代表 40 ms
gain的观点是，0.4。
// mm / mV → 每个大格代表 ±10 mV
pixelsPerMillimeter: 6,adcBaseline: 2048,adcUnitsPerMv: 256,});viewer.setData;

这里有三个真正决定“心电图纸感”的参数：

• speed:  — mm 对应 秒，所以每个小格为 ms； 典型值为 25 mm/s。
• gain:  — mm 对应 mV；不过，典型值为 0.4 mV/mm。
• pixelsPerMillimeter:  — 只决定屏幕显示密度，不改变上述医学比例。话说回来，

想看更细的局部时可以直接调用：

viewer.zoomBy;// 放大一级
viewer.setOptions;viewer.resetViewport;

使用者也能用鼠标拖动、滚轮或双指缩放。网格与波形会分层绘制，而且仅处理可见样本；高密度数据缩小时会保留每个像素桶的峰谷，而不是把尖峰“抹平”。

你的数据是多导联？直接传数组或对象即可，

h5ECG 支持多种布局，如 12x1<\/span>,6x2-sync<\/span>。6x2-continuous<\/span>,3x4-sync<\/span>,3x4-continuous<\/span>…怎么说呢，

• You can pass an array of leads or an object keyed by lead names.
• This eliminates need to manually create a separate Canvas for each lead and compute start/end coordinates.

viewer.setOptions;viewer.setData({
I : leadI,II : leadII,III : leadIII,aVR : leadR,aVL : leadL。aVF : leadF,V1 : leadV1,V2 : leadV2,V3 : leadV3,V4 : leadV4,V5 : leadV5,V6 : leadV6
});

React 与 Vue：包装组件直接上手快速演示

React 示例

import { EcgCanvas } from 'h5ecg/react';说起来，

export function ReportView { return ( );老实说，}

Vue 示例