用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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
利用CSS3的定位页面元素
Aug 29 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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
我的论坛源代码(六)
2006/10/09 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php获取操作系统语言代码
2013/11/04 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
详解js中==与===的区别
2017/01/08 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Python中bisect的用法
2014/09/23 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
python 显示数组全部元素的方法
2018/04/19 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python全局变量引用与修改过程解析
2020/01/07 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
python新手学习可变和不可变对象
2020/06/11 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
银行自荐信范文
2013/10/07 职场文书
移动通信专业自荐信范文
2013/11/12 职场文书
社会保险接收函
2014/01/12 职场文书
韩国商务邀请函
2014/01/14 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
中学语文教学反思
2016/02/16 职场文书
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers