失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 心电图特效代码 html5 如何使用html5 canvas实现心电图的移动效果

心电图特效代码 html5 如何使用html5 canvas实现心电图的移动效果

时间:2018-07-13 21:25:18

相关推荐

心电图特效代码 html5 如何使用html5 canvas实现心电图的移动效果

本篇文章给大家带来的内容是关于如何使用html5 canvas实现心电图的移动效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果图:

思路:

1、模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点)

模拟点时注意的点就是高起部分需要对称以及为了好看要随机出现上上下下

2、画线

画线需要注意有一个匀速移动的过程。

比如 A点到B点,不是简单的A画到B,而是A点到A1,A2....最后到B(这一块按照比例移动比较难)

3、画线的一些效果,比如加上阴影(这里就可以自由发挥了)

具体代码

心电图

html,body{

width: 100%;

height: 100%;

margin: 0;

}

canvas{

background: #000;

width: 100%;

height: 100%;

}

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();

}

}

相关推荐:

如何用HTML5的Canvas制作3D动画效果

HTML5 Canvas动画效果图文代码演示

如果觉得《心电图特效代码 html5 如何使用html5 canvas实现心电图的移动效果》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。