用canvas画心电图的示例代码


Posted in HTML / CSS onSeptember 10, 2018

本文介绍了用canvas画心电图的示例代码,分享给大家,具体如下:

效果图:

用canvas画心电图的示例代码

思路:

​1.模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点)

​ 模拟点时注意的点就是高起部分需要对称以及为了好看要随机出现上上下下

2.画线

​ 画线需要注意有一个匀速移动的过程。

​ 比如 A点到B点,不是简单的A画到B,而是A点到A1,A2....最后到B(这一块按照比例移动比较难)

3.画线的一些效果,比如加上阴影(这里就可以自由发挥了)具体代码

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>心电图</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <style>
         html,body{
             width: 100%;
             height: 100%;
             margin: 0;
         }
         canvas{
             background: #000;
             width: 100%;
            height: 100%;
         }
     </style>
 </head>
 <body>
 <div id="canvas">
     <canvas id="can"></canvas>
 </div>
 <script>
     var can = document.getElementById('can'),
         pan,
         index = 0,
         flag = true,
         wid = document.body.clientWidth,
         hei = document.body.clientHeight,
         x = 0,
         y = hei/2,
         drawX = 0, 
         drawY = hei/2,
         drawXY = [],
         cDrawX = 0,
         i = 0,
         reX = 0,
         reY = 0;
     start();
     function start(){
         can.height = hei;
         can.width  = wid;
         pan = can.getContext("2d");
         pan.strokeStyle = "white";
         pan.lineJoin = "round";
         pan.lineWidth = 6;
         pan.shadowColor = "#228DFF";
         pan.shadowOffsetX = 0;
         pan.shadowOffsetY = 0;
         pan.shadowBlur = 20;
         pan.beginPath();
         pan.moveTo(x,y);
         drawXYS();
         index = setInterval(move,1);
     };

     function drawXYS(){
         if(drawX > wid){
         }else{
             if(drawY == hei/2){
                 if(flag){
                     flag = false;
                 }else{
                     var _y = Math.ceil(Math.random()*10);
                     _y = _y/2;
                     if(Number.isInteger(_y)){
                         drawY += Math.random()*180+30;
                     }else{
                         drawY -= Math.random()*180+30;
                     }
                     flag = true;
                 }
                 cDrawX = Math.random()*40+15;
             }else{
                 drawY = hei/2;
             }
             drawX += cDrawX;
             drawXY.push({
                 x : drawX,
                 y : drawY
             });
             drawXYS();
         }
     }

     function move(){
         var x = drawXY[i].x,
             y = drawXY[i].y;
         if(reX >= x - 1){
             reX = x;
             reY = y;
             i++;
             cc();
             return;
         }
         if(y > hei/2){
             if(reY >= y){
                 reX = x;
                 reY = y;
                 i++;
                 cc();
                 return;
             }
         }else if(y < hei/2){
             if(reY <= y){
                 reX = x;
                 reY = y;
                 i++;
                 cc();
                 return;
             }
         }else{
             reX = x;
             reY = y;
             i++;
             cc();
             return;
         }

         reX += 1;
         if(y == hei/2){
             reY = hei/2;
         }else{
             var c = Math.abs((drawXY[i].x-drawXY[i-1].x)/(drawXY[i].y-drawXY[i-1].y));
             var _yt = (reX-drawXY[i-1].x)/c;

             if(drawXY[i].y < drawXY[i-1].y){
                 reY = drawXY[i-1].y - _yt;
             }else{
                 reY = drawXY[i-1].y + _yt;
             }
         }
         cc();
     }

    function cc(){
        if(i == drawXY.length){
             pan.closePath();
             clearInterval(index);
             index = 0;
             x = 0;
             y = hei/2;
             flag = true;
             i = 0;
         }else{
             pan.lineTo(reX, reY);
             pan.stroke();
         }
    }
 
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解HTML5新增标签
Nov 27 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 #HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 #HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 #HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 #HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 #HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 #HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 #HTML / CSS
You might like
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
功能完善的小程序日历组件的实现
2020/03/31 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python 多线程串行和并行的实例
2019/02/22 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
阿里云:Aliyun.com
2017/02/15 全球购物
超市开店计划书
2014/04/26 职场文书
小班上学期评语
2014/05/05 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
查摆剖析材料范文
2014/09/30 职场文书