html5 canvas线条下落动画特效是一款跟下雨有点相似的线条下落动画效果。
(function(){
var c = document.getElementById("c"),
ctx = c.getContext("2d");
c.width = innerWidth;
c.height = innerHeight;
var lines = [],
maxSpeed = 5,
spacing = 5,
xSpacing = 0,
n = innerWidth / spacing,
colors = ["#3B8686", "#79BD9A", "#A8DBA8", "#0B486B"],
i;
for (i = 0; i < n; i++){
xSpacing += spacing;
lines.push({
x: xSpacing,
y: Math.round(Math.random()*c.height),
width: 2,
height: Math.round(Math.random()*(innerHeight/10)),
speed: Math.random()*maxSpeed + 1,
color: colors[Math.floor(Math.random() * colors.length)]
});
}
function draw(){
var i;
ctx.clearRect(0,0,c.width,c.height);
for (i = 0; i < n; i++){
ctx.fillStyle = lines[i].color;
ctx.fillRect(lines[i].x, lines[i].y, lines[i].width, lines[i].height);
lines[i].y += lines[i].speed;
if (lines[i].y > c.height)
lines[i].y = 0 - lines[i].height;
}
requestAnimationFrame(draw);
}
draw();
}());
申明:本站所有资源都是转载各大下载站,或由网友投稿发布,请自行检测软件的完整性,如有侵权请联系我们删除下架,联系方式:admin@php.cn