如何使用html5 canvas实现心电图的移动效果
导读:收集整理的这篇文章主要介绍了如何使用html5 canvas实现心电图的移动效果,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来的内容是关于如何使用HTML5 canvas实现心电图的移动效果,有一定的参考价值,有需要的...
收集整理的这篇文章主要介绍了如何使用html5 canvas实现心电图的移动效果,觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来的内容是关于如何使用HTML5 canvas实现心电图的移动效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。效果图:
思路:
1、模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点)
模拟点时注意的点就是高起部分需要对称以及为了好看要随机出现上上下下
2、画线
画线需要注意有一个匀速移动的过程。
比如 A点到B点,不是简单的A画到B,而是A点到A1,A2....最后到B(这一块按照比例移动比较难)
3、画线的一些效果,比如加上阴影(这里就可以自由发挥了)
具体代码
!DOCTYPE htML> html> 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>
相关推荐:
如何用HTML5的Canvas制作3D动画效果
HTML5 Canvas动画效果图文代码演示
以上就是如何使用html5 canvas实现心电图的移动效果的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 如何使用html5 canvas实现心电图的移动效果
本文地址: https://pptw.com/jishu/584477.html