<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟心电图</title> <meta content="width=device-width, initial-scale=1, user-scalable=no"> <style> html,body{ width: 100%; height: 100%; margin: 0; } </style> </head> <body> <div> <canvas>Canvas画板</canvas> </div> <script src="https://www.jb51.net/js/vue.min.js"></script> <script> 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(); } /* */ </script> </body> </html>
以上这篇使用原生js+canvas实现模拟心电图的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: