正文
canvas粒子效果-snow
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background:rgba(0,0,0,1);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
w = window.innerWidth;
h = window.innerHeight;
var max = 100;
var par = [];
ctx.lineWidth = 2;
for( var i = 0 ;i < max ; i++ ){
par.push({
xs:Math.random()*w,
ys:Math.random()*h,
xc:-2+Math.random()*4,
yc:Math.random()*5+2
})
}
var draw = function(){
ctx.clearRect(0,0,w,h);
for( var j = 0; j < par.length; j++ ){
var p = par[j];
ctx.beginPath();
ctx.moveTo(p.xs,p.ys);
ctx.lineTo(p.xs+p.xc,p.ys+p.yc);
ctx.stroke();
ctx.strokeStyle = "rgba(174,194,224,.5)";
p.xs += p.xc;
p.ys +=p.yc;
if( p.xs>w||p.ys>h){
p.xs = Math.random()*w;
p.ys =-20;
}
}
requestAnimationFrame(draw);
}
// draw();
// setInterval(function(){
// draw();
// },40)
requestAnimationFrame(draw);
</script>
</body>
</html>
