matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟。
从最开始的懵懵懂懂,到现在学着开始写github、写博客,其实技术上没有太多可写的,毕竟自己也才刚刚入门,只能说是按照自己的兴趣,写点有意思的小项目,项目上存在的问题,也希望大神能够予以指正,目前这个demo的功能已经实现,后期我会对样式、代码等方面进行优化。
项目运行效果:
项目简介:使用原生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 < 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;
}
项目完整代码:
模拟心电图
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 < 100){
}else{
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();
}
/* */
以上这篇使用原生js+canvas实现模拟心电图的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例相关推荐
- java心电图_使用原生js+canvas实现模拟心电图
从2016年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
- 五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏 效果图 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15 ...
- html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块 先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...
- 【学习随记】原生js canvas 画海报
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
- html实现两个箭头向左向右,原生JS实现左右箭头选择日期实例代码
原生JS实现左右箭头选择日期实例代码 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现左右箭头选择日期实例代码,编程之家小编觉得 ...
- html五子棋游戏制作原理,原生JS+Canvas实现五子棋游戏
功能模块 先看下现在做完的效果: 代码详解 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = f ...
- 前端小白写了个网页版五子棋游戏,使用原生 JS + Canvas 实现绘制棋子、棋盘
功能模块 快来体验下吧!看下你能赢得了计算机么? 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 老规矩,源码贴上 具体代码 (1)HTML代码 <!DOCTYPE html ...
- 图片五子棋PHP接口,原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15, ...
最新文章
- 源码编译spring
- SpringBoot2.5.4发送邮件4种方式
- Linux 进程后台运行
- DDD(领域驱动设计)系列之一-DomainPrimitive
- sql无法写入mysql_windows7 sqlserver2012 无法写入受保护的内存 解决办法
- Python人脸识别的简要介绍(附实例、Python代码)
- 解决 GDI 贴图的闪烁
- 自制病毒——控制桌面鼠标以及开关机
- 1209-纯碱跌8%,菜粕大涨4%
- 数据库原理及应用-李唯唯主编-实验3-3
- k8s集群外部域名dns解析问题
- 网盘变成本地硬盘教程
- 徐海学院计算机系朗诵比赛,第九届礼仪文化月之校园礼仪小姐礼仪先生评选决赛...
- 局域网联机_七日杀v17.2(B27)版/支持局域网联机/多项修改器/初始存档/局域网联机教程...
- Dev C++ 下载地址和安装教程
- 微信去除 防欺诈或盗号请不要输入qq密码 的方法
- labelme 批量转换json文件 详细步骤
- 中科大科学岛计算机复试,2020年中国科学技术大学研究生院科学岛分院复试办法及复试内容...
- [MCSM] Slice Sampler
- 使用工具 SQL Tuning Expert for Oracle 优化SQL语句