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

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

html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>html5前端开发教程</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
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>
<script type=”text/javascript”>
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简单水滴效果》
» 本文链接地址:https://www.rokub.com/3302.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!