用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 相关文章推荐
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
css3 选择器
May 11 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中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php中stdClass的用法分析
2015/02/27 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
wxPython多个窗口的基本结构
2019/11/19 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
企划专员岗位职责
2013/12/09 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
实习协议书范本
2014/09/25 职场文书
2014公司年终工作总结
2014/12/19 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
Python基于百度API识别并提取图片中文字
2021/06/27 Python