从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟。
从最开始的懵懵懂懂,到现在学着开始写github、写博客,其实技术上没有太多可写的,毕竟自己也才刚刚入门,只能说是按照自己的兴趣,写点有意思的小项目,项目上存在的问题,也希望大神能够予以指正,目前这个demo的功能已经实现,后期我会对样式、代码等方面进行优化。
项目运行效果:
项目简介:使用原生js+canvas制作的模拟心电图的html页面,因为和项目一起打包放到了github上,所以使用了vue.js的单页模式,实际上你不需要使用任何额外的框架和样式,也可以完成这个demo,现在让我们一起来拆解这个项目吧!
1:在页面上创建一个canvas画布,要让心电图的“线”在我们的页面上动起来,canvas是必不可少的。因为项目比较简单,到此为止页面上的DOM元素已经写完了,主要的工作量集中在js部分
2:定义几个变量并赋值,运行时会需要用到这些变量进行计算
3:初始化画布,给画布设置各种属性
可以看到,在这里我们还没有涉及到“画”的动作,仅仅只是初始化了画布尺寸,使画布充满屏幕,同时定义了画笔的颜色、粗细、落笔点等操作,然后使用setInterval方法让画笔不停地按照我们计算的路线运动,如果你对setInterval方法不是很熟悉,建议你看下 setInterVal用法,这里不再敷述。因为我们想要让心电图无限循环且自动执行,所以在这里将它封装为start()函数,这样当心电图运动到屏幕最右方时,我们重新执行这个start()函数,就可以实现让心电图无限循环了
4.让心电图动起来!可以说,前面的步骤都没有什么难度,真正的核心代码在于让我们的心电图动起来,并且是按照我们希望的路线前进,下面我们就让心电图真正活过来
if(y <= z){
//画布的坐标是从<a href="https://www.jb51.cc/tag/zuoshangjiao/" target="_blank" class="keywords">左上角</a>开始计算的,也就是最<a href="https://www.jb51.cc/tag/zuoshangjiao/" target="_blank" class="keywords">左上角</a>的点的坐标是(0,0),y是当前画笔所在坐标的y轴,假如y小于z,就代表y已经到达波峰位置,准备开始向波谷运动
flag = true
}
if((hei - y) <= z){
//假如当前画笔在y轴的坐标y距离浏览器<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>hei的差值已经小于<a href="https://www.jb51.cc/tag/suiji/" target="_blank" class="keywords">随机</a>值z,代表当前的画笔已经运行到波谷位置,准备转向波峰位置运动
flag = false
}
if(flag){
//假如flag为true,代表画笔仍然向波谷位置前进,需要花点功夫理解的是,因为画布<a href="https://www.jb51.cc/tag/zuoshangjiao/" target="_blank" class="keywords">左上角</a>的点的坐标是(0,0),所以y的值越大,画笔在y轴的位置越靠近浏览器<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>,所以向波谷运动时,y的值是不断<a href="https://www.jb51.cc/tag/zengjia/" target="_blank" class="keywords">增加</a>的,同时为了让波峰波谷更陡峭,我这里设置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();
}
//lin<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>和<a href="https://www.jb51.cc/tag/stroke/" target="_blank" class="keywords">stroke</a><a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>负责描绘运动轨迹
pan.lin<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>(x,y);
pan.<a href="https://www.jb51.cc/tag/stroke/" target="_blank" class="keywords">stroke</a>();
}
5:注意事项,到这里实际上心电图已经可以运行起来了,但是要注意的是,设置你的body高度为100%,否则画布可能无法撑满整个页面
项目完整代码: