利用html5实现canvas线条下落动画特效



9 33 12



特效描述:利用html5实现 canvas 线条下落 动画特效,利用html5实现canvas线条下落动画特效

代码结构

1. HTML代码

<canvas id="c"></canvas>
<script>
(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();
}());
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5线条动画 html5线条动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到