代码如下：
<!DOCTYPE html>
<html>
<head>
<title> ... </title>
<meta charset="utf-8"/>
<meta name="HSW" content="">
<meta name="Keywords" content="">
<style>
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id=c></canvas>
</body>
<script>
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
opts = {
count: w / 10,
baseSize: 1,
addedSize: 2,
velX: 1,
velY: 4,
framesBack: 8, //control the drop line higher portion
framesFront: 4 //control the drop line lower portion
},
drops = [];
function anim() {
window.requestAnimationFrame(anim);
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = '#eee';
if (drops.length < opts.count)
drops.push(new Drop);
drops.map(function(drop) {
drop.step();
});
}
function Drop() {
this.x = (Math.random() * w) | 0;
this.y = 0;
this.size = opts.baseSize + opts.addedSize * Math.random();
this.vx = opts.velX * this.size;
this.vy = opts.velY * this.size;
}
Drop.prototype.step = function() {
this.x += this.vx
this.y += this.vy;
if (this.x - opts.framesBack * this.vy > w)
this.x = -opts.framesFront * this.vy;
if (this.y - opts.framesBack * this.vy > h)
this.y = -opts.framesFront * this.vy;
var x = this.x - opts.framesBack * this.vx,
y = this.y - opts.framesBack * this.vy;
for (var i = 1; i < opts.framesBack; ++i) {
ctx.lineWidth = i / opts.framesBack * this.size;
ctx.beginPath();
ctx.moveTo(x, y);
x += this.vx;
y += this.vy;
ctx.lineTo(x, y);
ctx.stroke();
}
for (var i = 0; i < opts.framesFront; ++i) {
ctx.lineWidth = this.size - i / opts.framesFront * this.size;
ctx.beginPath();
ctx.moveTo(x, y);
x += this.vx;
y += this.vy;
ctx.lineTo(x, y);
ctx.stroke();
}
}
anim();
window.addEventListener('resize', function() {
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
})
</script>
</html>
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
