使用原生js+canvas制作的模拟心电图的html页面，因为和项目一起打包放到了github上，所以使用了vue.js的单页模式，实际上你不需要使用任何额外的框架和样式，也可以完成这个demo，现在让我们一起来拆解这个项目吧！
1：在页面上创建一个canvas画布，要让心电图的“线”在我们的页面上动起来，canvas是必不可少的。因为项目比较简单，到此为止页面上的DOM元素已经写完了，主要的工作量集中在js部分
Canvas画板
登录后复制
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 = wid - 100){ //最后的100px，同样希望心电图只做水平运动，不会上下波动，所以不做任何操作 }else{ //为了让心电图看起来更加逼真，我们希望心电图在运动时每次的波峰和波谷都是随机的，这样更类似于人类的心跳，所以我们给它一个随机值z var z = Math.random()*280; if(y 5：注意事项，到这里实际上心电图已经可以运行起来了，但是要注意的是，设置你的body高度为100%，否则画布可能无法撑满整个页面
html,body{ width: 100%; height: 100%; margin: 0; }
登录后复制
项目完整代码：
nbsp;html> 模拟心电图 html,body{ width: 100%; height: 100%; margin: 0; } Canvas画板
var can = document.getElementById('can'), pan, index = 0, flag = true, wid = document.body.clientWidth, hei = document.body.clientHeight, x = 0, y = hei/2; start(); 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); }; function move(){ x++; if(x = wid - 100){ }else{ var z = Math.random()*280; if(y <= z){ flag = true } if((hei - y) <= z){ flag = false } if(flag){ y+=5 }else{ y-=5 } } } if(x == wid){ pan.closePath(); clearInterval(index); index = 0; x = 0; y = hei/2; flag = true; start(); } pan.lineTo(x,y); pan.stroke(); } /* */
登录后复制
相关推荐：
Canvas实现炫丽的粒子运动效果
canvas多边形的画法示例
html2 canvas实现浏览器截图
以上就是原生js和canvas模拟心电图代码分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787400.html
