雪花飘飘

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>雪花</title>
	<style type="text/css">
		 * {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
		#myCanvas {
			background: black;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas">
		
	</canvas>

	<script>
		//获取画布
		var can = document.getElementById("myCanvas");
		var ctx = can.getContext("2d");
		//画布宽度
		var wid = window.innerWidth;
		//画布高度
		var hei = window.innerHeight;
		can.width = wid;
		can.height = hei;
		var snow = 100;
		//半径，坐标
		var arr = [];
		//保存坐标
		for (var i = 0; i < snow; i++) {
			arr.push({
				x: Math.random() * wid,
				y: Math.random() * hei,
				r: Math.random() * 10 + 1
				})
		}

		//画雪花
		function drowSnow() {
			ctx.clearRect(0,0,wid,hei);
			ctx.fillStyle = "white";
			ctx.beginPath();
			for (var i = 0; i < snow; i++) {
				var p = arr[i];
				ctx.moveTo(p.x,p.y);
				ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);
			}
			ctx.fill();
			//雪花飘落
			snowFall();
			ctx.closePath();
		}
		//雪花飘落
		function snowFall() {
			for (var i = 0; i < snow; i++) {
				var p = arr[i];
				p.y +=  Math.random() * 2 + 1;
				if (p.y > hei) {
					p.y = 0;
				}
				p.x +=  Math.random() * 2 + 1;
				if (p.x > wid) {
					p.x = 0;
				}
			}
		}
		setInterval(drowSnow, 50);
	</script>
</body>
</html>
效果链接:http://runjs.cn/code/end5gyfs
猜你喜欢
