H5网页前端开发_Canvas简单水滴效果

html5网页前端开发|web前端开发

html 代码

<!DOCTYPE html>

<html>

<head>

<metacharset=”UTF-8″>

<title>html5前端开发教程</title>

margin:0;

padding:0;

}

html,

body{

width:100%;

height:100%;

overflow:hidden;

transform:scale(1.05);

}

.backgroundDiv{

width:100%;

height:100%;

position:fixed;

z-index:-1;

background:url(http://cdn.attach.qdfuns.com/notes/pics/201705/19/144931fpltgxgi7gbjggtj.jpg)centercenterno-repeat;

background-size:100%100%;

filter:blur(10px);

}

canvas{

position:absolute;

z-index:1;

border-radius:100%;

}

</style>

</head>

<body>

<divclass=”backgroundDiv”></div>

varrainAnimate={

init:function(){

this.img=newImage();

this.img.src=’http://cdn.attach.qdfuns.com/notes/pics/201705/19/144931fpltgxgi7gbjggtj.jpg’;

this.img.width = window.innerWidth;

this.img.height = window.innerHeight;

this.rainArr= [];

this.rainCvsArr= [];

for (vari=0;i<200;i++) {

this.rainArr.push({

x: Math.random() * window.innerWidth,

y: Math.random() * window.innerHeight,

z: Math.random() * 5 + 10,

r: 3,

sx: Math.random(),

sy: Math.random() * 2

});

}

this.img.onload=function(){

for (vari=0;i<rainAnimate.rainArr.length;i++) {

varrain=rainAnimate.rainArr[i];

varcvs=document.createElement(‘canvas’);

cvs.style.left =rain.x +’px’;

cvs.style.top =rain.y +’px’;

cvs.width =rain.z;

cvs.height =rain.z;

varctx=cvs.getContext(‘2d’);

//drawImg(ctx,rain.x,rain.y,rain.z);

ctx.drawImage(rainAnimate.img,rain.x,rain.y +80,100,100,0,0,rain.z,rain.z);

document.body.insertBefore(cvs, document.body.childNodes[0]);

rainAnimate.rainCvsArr.push(cvs);

}

rainAnimate.play();

};

play:function(){

varraincvsarr=rainAnimate.rainCvsArr;

for (vari=0;i<raincvsarr.length;i++) {

varrain=rainAnimate.rainArr[i];

varcvs=raincvsarr[i];

rain.y +=rain.sy;

rain.sy=Math.random() *2;

if (rain.y > window.innerHeight) {

rain.y =0;

}

//cvs.style.left = rain.x – rain.sx + ‘px’;

cvs.style.top =rain.y +rain.sy+’px’;

varctx=cvs.getContext(‘2d’);

ctx.drawImage(rainAnimate.img,rain.x,rain.y +80,100,100,0,0,rain.z,rain.z);

}

window.requestAnimationFrame(rainAnimate.play);

}

};

rainAnimate.init();

</script>

</body>

</html>

html5前端技术开发|网站前端开发

https://www.rokub.com

H5网页前端开发_Canvas简单水滴效果

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发