这篇文章将为大家详细讲解有关如何使用原生js+canvas实现模拟心电图,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
专注于为中小企业提供网站制作、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业蓬莱免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了成百上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
项目运行效果:
项目简介:使用原生js+canvas制作的模拟心电图的html页面,因为和项目一起打包放到了github上,所以使用了vue.js的单页模式,实际上你不需要使用任何额外的框架和样式,也可以完成这个demo,现在让我们一起来拆解这个项目吧!
1:在页面上创建一个canvas画布,要让心电图的“线”在我们的页面上动起来,canvas是必不可少的。因为项目比较简单,到此为止页面上的DOM元素已经写完了,主要的工作量集中在js部分
2:定义几个变量并赋值,运行时会需要用到这些变量进行计算
var can = document.getElementById('can'),//画布对象 pan,//获取2D图像API接口 index = 0,//用来接收setinerval的值 flag = true,//用来控制心电图折线的运行方向 wid = document.body.clientWidth,//获取浏览器宽度 hei = document.body.clientHeight,//获取浏览器高度 x = 0,//心电图的“点”在画布上的x轴坐标,从0开始 y = hei/2;//心电图的“点”在画布上的y轴坐标,从页面y轴居中位置开始
3:初始化画布,给画布设置各种属性
function start(){ can.height = hei;//设置画布高度 can.width = wid;//设置画布宽度 pan = can.getContext("2d");//获取2D图像API接口 pan.strokeStyle = "#08b95a";//设置画笔颜色 pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接 pan.lineWidth = 9;//设置画笔粗细 pan.beginPath();//开始一条画笔的路径 pan.moveTo(x,y);//定位我们的“落笔点” index = setInterval(move,1);//让我们的画笔动起来 };
可以看到,在这里我们还没有涉及到“画”的动作,仅仅只是初始化了画布尺寸,使画布充满屏幕,同时定义了画笔的颜色、粗细、落笔点等操作,然后使用setInterval方法让画笔不停地按照我们计算的路线运动,如果你对setInterval方法不是很熟悉,建议你看下 setInterVal用法 ,这里不再敷述。因为我们想要让心电图无限循环且自动执行,所以在这里将它封装为start()函数,这样当心电图运动到屏幕最右方时,我们重新执行这个start()函数,就可以实现让心电图无限循环了
4.让心电图动起来!可以说,前面的步骤都没有什么难度,真正的核心代码在于让我们的心电图动起来,并且是按照我们希望的路线前进,下面我们就让心电图真正活过来
function move(){ x++;//x轴是始终运动的,所以x一直自增 if(x < 100){ //前100px,我们不希望做垂直运动,让点只沿垂直方向运动即可,所以不做任何操作 }else{ if(x >= wid - 100){ //最后的100px,同样希望心电图只做水平运动,不会上下波动,所以不做任何操作 }else{ //为了让心电图看起来更加逼真,我们希望心电图在运动时每次的波峰和波谷都是随机的,这样更类似于人类的心跳,所以我们给它一个随机值z var z = Math.random()*280; if(y <= z){ //画布的坐标是从左上角开始计算的,也就是最左上角的点的坐标是(0,0),y是当前画笔所在坐标的y轴,假如y小于z,就代表y已经到达波峰位置,准备开始向波谷运动 flag = true } if((hei - y) <= z){ //假如当前画笔在y轴的坐标y距离浏览器底部hei的差值已经小于随机值z,代表当前的画笔已经运行到波谷位置,准备转向波峰位置运动 flag = false } if(flag){ //假如flag为true,代表画笔仍然向波谷位置前进,需要花点功夫理解的是,因为画布左上角的点的坐标是(0,0),所以y的值越大,画笔在y轴的位置越靠近浏览器底部,所以向波谷运动时,y的值是不断增加的,同时为了让波峰波谷更陡峭,我这里设置y += 5, y+=5 }else{ //假如flag为false,表示向波峰运动,y的值是不断减小的 y-=5 } } } if(x == wid){ //当画笔运动到浏览器右侧边缘,停止绘图 pan.closePath(); //清除循环 clearInterval(index); //将index置零,准备下一次循环 index = 0; //重新定位画笔到屏幕左侧上下居中的位置 x = 0; y = hei/2; flag = true; //重新进行下一次心电图的绘制 start(); } //lineTo和stroke函数负责描绘运动轨迹 pan.lineTo(x,y); pan.stroke(); }
5:注意事项,到这里实际上心电图已经可以运行起来了,但是要注意的是,设置你的body高度为100%,否则画布可能无法撑满整个页面
html,body{ width: 100%; height: 100%; margin: 0; }
项目完整代码:
模拟心电图
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。
关于“如何使用原生js+canvas实现模拟心电图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。