从2015年2月转行进入IT行业，到现在也有将近两年的时间了，从最开始的java到现在的前端，前进的路上一直靠自己摸索，一路走到现在，前端大神是绝对谈不上的，最多算一只刚入门的菜鸟。从最开始的懵懵懂懂，到现在学着开始写github、写博客，其实技术上没有太多可写的，毕竟自己也才刚 ...
从2015年2月转行进入IT行业，到现在也有将近两年的时间了，从最开始的java到现在的前端，前进的路上一直靠自己摸索，一路走到现在，前端大神是绝对谈不上的，最多算一只刚入门的菜鸟。
从最开始的懵懵懂懂，到现在学着开始写github、写博客，其实技术上没有太多可写的，毕竟自己也才刚刚入门，只能说是按照自己的兴趣，写点有意思的小项目，项目上存在的问题，也希望大神能够予以指正，目前这个demo的功能已经实现，后期我会对样式、代码等方面进行优化。
项目githu地址： https://qq597367462.github.io/ttmusic/#/heartBeat
项目运行效果：
项目简介：使用原生js+canvas制作的模拟心电图的html页面，因为和项目一起打包放到了github上，所以使用了vue.js的单页模式，实际上你不需要使用任何额外的框架和样式，也可以完成这个demo，现在让我们一起来拆解这个项目吧！
1：在页面上创建一个canvas画布，要让心电图的“线”在我们的页面上动起来，canvas是必不可少的。因为项目比较简单，到此为止页面上的DOM元素已经写完了，主要的工作量集中在js部分
1 <div >2 <canvas id="can">Canvas画板</canvas>3 </div>
2：定义几个变量并赋值，运行时会需要用到这些变量进行计算
1 var can = document.getElementById('can'),//画布对象2 pan,//获取2D图像API接口3 index = 0,//用来接收setinerval的值4 flag = true,//用来控制心电图折线的运行方向5 wid = document.body.clientWidth,//获取浏览器宽度6 hei = document.body.clientHeight,//获取浏览器高度7 x = 0,//心电图的“点”在画布上的x轴坐标，从0开始8 y = hei/2;//心电图的“点”在画布上的y轴坐标，从页面y轴居中位置开始
3:初始化画布，给画布设置各种属性
1 function start(){ 2 can.height = hei;//设置画布高度 3 can.width = wid;//设置画布宽度 4 pan = can.getContext("2d");//获取2D图像API接口 5 pan.strokeStyle = "#08b95a";//设置画笔颜色 6 pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接 7 pan.lineWidth = 9;//设置画笔粗细 8 pan.beginPath();//开始一条画笔的路径 9 pan.moveTo(x,y);//定位我们的“落笔点”10 index = setInterval(move,1);//让我们的画笔动起来11 };可以看到，在这里我们还没有涉及到“画”的动作，仅仅只是初始化了画布尺寸，使画布充满屏幕，同时定义了画笔的颜色、粗细、落笔点等操作，然后使用setInterval方法让画笔不停地按照我们计算的路线运动，如果你对setInterval方法不是很熟悉，建议你看下 setInterVal用法 ,这里不再敷述。因为我们想要让心电图无限循环且自动执行，所以在这里将它封装为start()函数，这样当心电图运动到屏幕最右方时，我们重新执行这个start()函数，就可以实现让心电图无限循环了
4.让心电图动起来！可以说，前面的步骤都没有什么难度，真正的核心代码在于让我们的心电图动起来，并且是按照我们希望的路线前进，下面我们就让心电图真正活过来
1 function move(){ 2 x++;//x轴是始终运动的，所以x一直自增 3 if(x < 100){ 4 //前100px，我们不希望做垂直运动，让点只沿垂直方向运动即可，所以不做任何操作 5 }else{ 6 if(x >= wid - 100){ 7 //最后的100px，同样希望心电图只做水平运动，不会上下波动，所以不做任何操作 8 }else{ 9 //为了让心电图看起来更加逼真，我们希望心电图在运动时每次的波峰和波谷都是随机的，这样更类似于人类的心跳，所以我们给它一个随机值z10 var z = Math.random()*280;11 12 if(y <= z){13 //画布的坐标是从左上角开始计算的，也就是最左上角的点的坐标是（0,0）,y是当前画笔所在坐标的y轴，假如y小于z，就代表y已经到达波峰位置，准备开始向波谷运动14 flag = true15 }16 if((hei - y) <= z){17 //假如当前画笔在y轴的坐标y距离浏览器底部hei的差值已经小于随机值z，代表当前的画笔已经运行到波谷位置，准备转向波峰位置运动18 flag = false19 }20 if(flag){21 //假如flag为true，代表画笔仍然向波谷位置前进，需要花点功夫理解的是，因为画布左上角的点的坐标是（0,0），所以y的值越大，画笔在y轴的位置越靠近浏览器底部，所以向波谷运动时，y的值是不断增加的，同时为了让波峰波谷更陡峭，我这里设置y += 5，22 y+=523 }else{24 //假如flag为false，表示向波峰运动，y的值是不断减小的25 y-=526 }27 }28 }29 if(x == wid){30 //当画笔运动到浏览器右侧边缘，停止绘图31 pan.closePath();32 //清除循环33 clearInterval(index);34 //将index置零，准备下一次循环35 index = 0;36 //重新定位画笔到屏幕左侧上下居中的位置37 x = 0;38 y = hei/2;39 flag = true;40 //重新进行下一次心电图的绘制41 start();42 }43 //lineTo和stroke函数负责描绘运动轨迹44 pan.lineTo(x,y);45 pan.stroke();46 } 5：注意事项，到这里实际上心电图已经可以运行起来了，但是要注意的是，设置你的body高度为100%，否则画布可能无法撑满整个页面
1 html,body{2 width: 100%;3 height: 100%;4 margin: 0;5 }项目完整代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模拟心电图</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 7 <style> 8 html,body{ 9 width: 100%;10 height: 100%;11 margin: 0;12 }13 </style>14 </head>15 <body>16 <div id="canvas">17 <canvas id="can">Canvas画板</canvas>18 </div>19 20 <script src='/images/loading.gif' data-original="js/vue.min.js"></script>21 <script>22 var can = document.getElementById('can'),23 pan,24 index = 0,25 flag = true,26 wid = document.body.clientWidth,27 hei = document.body.clientHeight,28 x = 0,29 y = hei/2;30 start();31 function start(){32 can.height = hei;33 can.width = wid;34 pan = can.getContext("2d");//获取2D图像API接口35 pan.strokeStyle = "#08b95a";//设置画笔颜色36 pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接37 pan.lineWidth = 9;//设置画笔粗细38 pan.beginPath();39 pan.moveTo(x,y);40 index = setInterval(move,1);41 };42 function move(){43 x++;44 if(x < 100){45 46 }else{47 if(x >= wid - 100){48 49 }else{50 var z = Math.random()*280;51 if(y <= z){52 flag = true53 }54 if((hei - y) <= z){55 flag = false56 }57 if(flag){58 y+=559 }else{60 y-=561 }62 }63 }64 if(x == wid){65 pan.closePath();66 clearInterval(index);67 index = 0;68 x = 0;69 y = hei/2;70 flag = true;71 start();72 }73 pan.lineTo(x,y);74 pan.stroke();75 }76 77 /* */78 79 </script>80 </body>81 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：使用原生js+canvas实现模拟心电图
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
