使⽤原⽣js+canvas实现模拟⼼电图
从2016年2⽉转⾏进⼊IT⾏业，到现在也有将近两年的时间了，从最开始的java到现在的前端，前进的路上⼀直靠⾃⼰摸索，⼀路⾛到现在，前端⼤神是绝对谈不上的，最多算
⼀只刚⼊门的菜鸟。
从最开始的懵懵懂懂，到现在学着开始写github、写博客，其实技术上没有太多可写的，毕竟⾃⼰也才刚刚⼊门，只能说是按照⾃⼰的兴趣，写点有意思的⼩项⽬，项⽬上存在
的问题，也希望⼤神能够予以指正，⽬前这个demo的功能已经实现，后期我会对样式、代码等⽅⾯进⾏优化。
项⽬运⾏效果：
项⽬简介：使⽤原⽣js+canvas制作的模拟⼼电图的html页⾯，因为和项⽬⼀起打包放到了github上，所以使⽤了vue.js的单页模式，实际上你不需要使⽤任何额外的框架和样
式，也可以完成这个demo，现在让我们⼀起来拆解这个项⽬吧！
1：在页⾯上创建⼀个canvas画布，要让⼼电图的“线”在我们的页⾯上动起来，canvas是必不可少的。因为项⽬⽐较简单，到此为⽌页⾯上的DOM元素已经写完了，主要的⼯作
量集中在js部分
原生js和js的区别1 <div class="heartBeat">
2 <canvas id="can">Canvas画板</canvas>
3 </div>
2：定义⼏个变量并赋值，运⾏时会需要⽤到这些变量进⾏计算
1var can = ElementById('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：初始化画布，给画布设置各种属性
1function start(){
2 can.height = hei;//设置画布⾼度
3 can.width = wid;//设置画布宽度
4 pan = Context("2d");//获取2D图像API接⼝
5 pan.strokeStyle = "#08b95a";//设置画笔颜⾊
6 pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
7 pan.lineWidth = 9;//设置画笔粗细
8 pan.beginPath();//开始⼀条画笔的路径
9 veTo(x,y);//定位我们的“落笔点”
10 index = setInterval(move,1);//让我们的画笔动起来
11 };
可以看到，在这⾥我们还没有涉及到“画”的动作，仅仅只是初始化了画布尺⼨，使画布充满屏幕，同时定义了画笔的颜⾊、粗细、落笔点等操作，然后使⽤setInterval⽅法让画笔
不停地按照我们计算的路线运动，如果你对setInterval⽅法不是很熟悉，建议你看下 ，这⾥不再敷述。因为我们想要让⼼电图⽆限循环且⾃动执⾏，所以在这⾥将它封装为start()
函数，这样当⼼电图运动到屏幕最右⽅时，我们重新执⾏这个start()函数，就可以实现让⼼电图⽆限循环了
4.让⼼电图动起来！可以说，前⾯的步骤都没有什么难度，真正的核⼼代码在于让我们的⼼电图动起来，并且是按照我们希望的路线前进，下⾯我们就让⼼电图真正活过来
1function move(){
2 x++;//x轴是始终运动的，所以x⼀直⾃增
3if(x < 100){
4//前100px，我们不希望做垂直运动，让点只沿垂直⽅向运动即可，所以不做任何操作
5 }else{
6if(x >= wid - 100){
7//最后的100px，同样希望⼼电图只做⽔平运动，不会上下波动，所以不做任何操作
8 }else{
9//为了让⼼电图看起来更加逼真，我们希望⼼电图在运动时每次的波峰和波⾕都是随机的，这样更类似于⼈类的⼼跳，所以我们给它⼀个随机值z
10var z = Math.random()*280;
11
12if(y <= z){
13//画布的坐标是从左上⾓开始计算的，也就是最左上⾓的点的坐标是（0,0）,y是当前画笔所在坐标的y轴，假如y⼩于z，就代表y已经到达波峰位置，准备开始向波⾕运动
14 flag = true
15 }
16if((hei - y) <= z){
17//假如当前画笔在y轴的坐标y距离浏览器底部hei的差值已经⼩于随机值z，代表当前的画笔已经运⾏到波⾕位置，准备转向波峰位置运动
18 flag = false
19 }
20if(flag){
21//假如flag为true，代表画笔仍然向波⾕位置前进，需要花点功夫理解的是，因为画布左上⾓的点的坐标是（0,0），所以y的值越⼤，画笔在y轴的位置越靠近浏览器底部，所以向波⾕运动时
22 y+=5
23 }else{
24//假如flag为false，表⽰向波峰运动，y的值是不断减⼩的
25 y-=5
26 }
27 }
28 }
29if(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="js/vue.min.js"></script>
21 <script>
22var can = ElementById('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();
31function start(){
32 can.height = hei;
33 can.width = wid;
34 pan = Context("2d");//获取2D图像API接⼝
35 pan.strokeStyle = "#08b95a";//设置画笔颜⾊
36 pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
37 pan.lineWidth = 9;//设置画笔粗细
38 pan.beginPath();
39 veTo(x,y);
40 index = setInterval(move,1);
41 };
42function move(){
43 x++;
44if(x < 100){
45
46 }else{
47if(x >= wid - 100){
48
49 }else{
50var z = Math.random()*280;
51if(y <= z){
52 flag = true
53 }
54if((hei - y) <= z){
55 flag = false
56 }
57if(flag){
58 y+=5
59 }else{
60 y-=5
61 }
62 }
63 }
64if(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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论