用canvas画心电图的示例代码

百变鹏仔 2个月前 (10-18) #H5教程

文章标签心电图

这篇文章主要介绍了用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> <p id="canvas">     <canvas id="can"></canvas> </p> <script>     var can = document.getElementById(&#39;can&#39;),         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>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！

文章推荐

用canvas画心电图的示例代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集