使用原生js+canvas实现模拟心电图

2018-06-24 00:19:50来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

从2016年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 class="heartBeat">
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                 //为了让心电图看起来更加逼真,我们希望心电图在运动时每次的波峰和波谷都是随机的,这样更类似于人类的心跳,所以我们给它一个随机值z
10                 var z = Math.random()*280;
11 
12                 if(y <= z){
13                     //画布的坐标是从左上角开始计算的,也就是最左上角的点的坐标是(0,0),y是当前画笔所在坐标的y轴,假如y小于z,就代表y已经到达波峰位置,准备开始向波谷运动
14                     flag = true
15                 }
16                 if((hei - y) <= z){
17                     //假如当前画笔在y轴的坐标y距离浏览器底部hei的差值已经小于随机值z,代表当前的画笔已经运行到波谷位置,准备转向波峰位置运动
18                     flag = false
19                 }
20                 if(flag){
21                     //假如flag为true,代表画笔仍然向波谷位置前进,需要花点功夫理解的是,因为画布左上角的点的坐标是(0,0),所以y的值越大,画笔在y轴的位置越靠近浏览器底部,所以向波谷运动时,y的值是不断增加的,同时为了让波峰波谷更陡峭,我这里设置y += 5,
22                     y+=5
23                 }else{
24                     //假如flag为false,表示向波峰运动,y的值是不断减小的
25                     y-=5
26                 }
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="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 = true
53                 }
54                 if((hei - y) <= z){
55                     flag = false
56                 }
57                 if(flag){
58                     y+=5
59                 }else{
60                     y-=5
61                 }
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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ES6,Array.includes()函数的用法

下一篇:JS中如何巧妙的用事件委托