canvas绘制心电图（js读取csv心电数据文件）

一、目的

1. 浏览器网页中绘制心电图并展示；
2. js读取解析心电数据文件；
3. 此文涉及到js从文件中读取心电数据环节（为什么一定是js读文件呢？因为心电图的绘制用到了HTML5中的canvas属性，而canvas属性只是提供一处绘制的区域、画布的大小等，真正的绘制过程还得在js中完成，而此文中的数据是保存在服务器中，所以需要js远程读取文件中的数据），之前对js不是很熟悉，在网上查了很多资料，感觉零零碎碎的，所以仅通过此文做一个完整的记录，欢迎批评指正。

二、流程

• 第一步：canvas生成画布，在画布指定区域绘制网格；
• 第二步：js读取解析csv文件（心电数据文件）【不一定非得读csv文件，其他格式的也可以，此文中的心电数据文件格式为csv】；
• 第三步：根据画布大小、网格大小等，将解析出来的心电数据绘制到相应位置，然后将每个点依次连接起来。

三、前期准备

• 心电数据：此文中用到的数据是从MIT数据库中下载得到；链接地址

  下载说明：
  （1）点开链接
  
  说明：
  “Database”一栏选择：MIT-BIH Arrhythmia Database(mitdb)
  “Record”一栏相应的包含了100~235个文件
  “Signals”一栏包含三个选择：all、MLII、V5（不同导联形式）
  “Toolbox”一栏包含各种选择，如：图形展示、不同格式数据展示等
  （2）下载csv格式心电数据
  “Toolbox”一栏选择：Export signals as CSV
  
  说明：
  此csv文件包含了10s的心电数据
  下载方式：点击上图中“samples.csv”即可

• 解析csv文件的插件
  papaparse插件，用于快速解析csv文件。（相关说明可以查阅官网文档）下载地址

四、代码实现

canvas生成画布，并画出相应网格。（首先在网页相应位置添加canvas）

<div id="singleEcg_">
        <canvas class="myCanvas" id="myCanvas" width="1080" height="230"></canvas>
</div>

此处画布id名为“myCanvas”，画布大小：长1080，宽230（根据自己需要设定）

画布准备好后，其他操作都在js中完成（绘制网格）

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var offsetx = 50;
var offsety = 0;
var width = 1000;
var height = 200;
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillRect (offsetx, offsety, width, height);

var d = 20