使用本机js画布模拟心电图的示例

从2015年2月转行IT行业到现在已经快两年了。从java开始到现在的前端，我一直在自己摸索。一路走到现在，前端大神是绝对不可能的。最多，我只是个新手。

我从一开始就学会了写github和博客。其实技术上我没什么可写的。毕竟我才刚刚开始。我只能说，我根据自己的兴趣写一些有趣的小项目，希望上帝能纠正项目中存在的问题。目前这个演示的功能已经实现，后期我会对风格和代码进行优化。

项目运营效果：

项目说明：原生js画布制作的心电模拟html页面与项目一起打包在github上，因此采用vue.js的单页面模式。事实上，您可以在不使用任何额外框架和样式的情况下完成这个演示。现在让我们一起拆解这个项目吧！

1.在页面上创建画布。画布是必要的，使心电图的“线”在我们的页面上移动。因为项目比较简单，所以到目前为止页面上的DOM元素都已经写好了，主要的工作量都集中在js部分

Div class=' heartbeat '画布ID=' can '画布画板/画布/div2:定义几个变量并赋值，运行时将需要这些变量进行计算

varcan=document . getelementbyid(' can ')，//canvas对象pan，//获取2D图像的API接口索引=0，//接收值flag=true的setinerval，//用于控制ECG折线wid=document.body.clientwidth的运行方向，//获取浏览器宽度hei=document.body.clientheight，//获取浏览器高度x=0，//画布上ECG“点”的x轴坐标，y=hei/2从0；//画布上心电图“点”的Y轴坐标，从页面Y轴中心初始化画布：为画布设置各种属性

函数start(){ can . height=hei；//设置画布高度can.width=wid//设置画布宽度pan=can . GetContext(' 2d ')；//获取2D图像API接口pan.strokeStyle=' # 08b95a//设置画笔颜色pan.lineJoin=' round//基于点拼接设置画笔轨迹pan . line width=9；//设置画笔粗细pan . BeginPath()；//开始一个笔刷路径pan.moveTo(x，y)；//定位我们的“落笔点”索引=setInterval(move，1)；//让我们的画笔动起来}；可以看到，我们这里并没有涉及到“画”的动作，只是初始化了画布大小，用画布填充屏幕，定义了画笔的颜色、粗细和落笔点，然后用setInterval方法让画笔按照我们计算出来的路线保持移动。如果你不熟悉setInterVal方法，建议你看一下setInterval的用法，这里还不够。因为我们希望心电图无限循环并自动执行，所以在这里将其封装为start()函数，这样当心电图移动到屏幕最右侧时，就可以重新执行这个start()函数，实现心电图的无限循环。

4.让心电图动起来！可以说前面的步骤并不难。真正的核心代码是让我们的心电图动起来，按照我们想要的路线走。让心电图真正活起来

函数move(){ x；//X轴总是在移动，所以X总是增加if(X ^ 100){//第一个100px。我们不想做垂直运动，所以我们不做其他任何事情{ if(x=wid-100){ //最后100px。我们也希望心电图只做水平运动，没有波动。所以不要做别的} {//为了让心电图看起来更逼真，我们希望心电图的波峰波谷在运动时每次都是随机的，更像人类的心跳，所以我们给它取一个随机值z var z=math . random()* 280；如果(y=z){ //画布的坐标是从左上角开始计算的，也就是左上角点的坐标是(0，0)，Y是画笔当前坐标的Y轴，如果Y小于Z，说明Y已经到了峰值位置。准备开始移动到低谷标志=真} if((hei-y)=z){ //如果当前画笔在y轴的坐标y与浏览器底部hei的差值小于随机值z，则表示当前画笔已经跑到低谷位置，准备转到峰值位置移动标志=假} if(flag){ //如果flag为真，则表示画笔仍在向低谷位置移动。需要花点功夫才能理解，因为画布左上角点的坐标是(0，0)，Y的值越大，画笔在Y轴上离浏览器底部越近，所以Y的值在向低谷移动时是递增的。同时为了让峰谷更陡，我在这里设置了y=5，Y=5 } else {//如果标志为false，y的值在减小y-=5}}}如果(x==wid){ //当画笔移动到浏览器的右边缘时，停止绘制pan . closepath()；//清除循环clearInterval(索引)；//将index设置为零，以index=0为下一个周期做准备；//将画笔重新定位到屏幕左侧上下中心位置x=0；y=hei/2；flag=true//再次开始下一次心电图绘制()；} //lineTo和stroke函数负责跟踪运动轨迹pan.lineTo(x，y)；pan . stroke()；}5:注意心电图其实可以在这里运行，但需要注意的是，将你的身高设置为100%，否则画布可能无法支撑整个页面

html，正文{ width : 100%；高度： 100%；margin : 0；}项目完整代码：

！doctype html lang=' en ' head meta charset=' utf-8 ' title模拟心电图/title meta name=' viewport ' content=' width=device-width，initial-scale=1，user-scale=no ' style html，body { width : 100%；高度： 100%；margin : 0；}/style/head dydiv id=' canvas ' canvas id=' can ' canvas drawing board/canvas/div script src=' http 3360 js/vue . min . js '/script script var can=document . getelementbyid(' can ')，pan，index=0，flag=true，wid=document.body.clientWidth，hei=document.body.clientHeight，x=0，y=hei/2；start()；函数start(){ can . height=hei；can.width=widpan=can . GetContext(' 2d ')；//获取2D图像API接口pan.strokeStyle=' # 08b95a//设置画笔颜色pan.lineJoin=' round//基于点拼接设置画笔轨迹pan . line width=9；//设置画笔粗细pan . BeginPath()；pan.moveTo(x，y)；index=setInterval(move，1)；};函数move(){ x；if(x 100){ } else { if(x=wid-100){ } else { var z=math . random()* 280；if(y=z){ flag=true } if((hei-y)=z){ flag=false } if(flag){ y=5 } else { y-=5 } } } if(x==wid){ pan . closepath()；clearInterval(索引)；索引=0；x=0；y=hei/2；flag=truestart()；} pan.lineTo(x，y)；pan . stroke()；} /* *//script/body/html上面这个用原生js画布实现模拟心电图的例子，就是边肖和大家分享的全部内容。希望能给大家一个参考，支持我们。