canvas编写的雪花飘落景象

在这里插入图片描述

场景图片

场景代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Snow</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0
			}
			#c1{
				margin:20px auto;
				display: block;
			}
			body {
				margin: 0;
				padding: 0;
				background: url(img/xue.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		</style>
	</head>

	<body>
		<canvas id='sky'></canvas>
		<script>
			window.onload = function() {
				var canvas = document.getElementById('sky');
				var ctx = canvas.getContext('2d');
				var W = window.innerWidth;
				var H = window.innerHeight;
				canvas.width = W;
				canvas.height = H;

				var flakesCount = 400; // 雪花个数
				var flakes = [];

				for (var i = 0; i < flakesCount; i++) {
					flakes.push({
						x: Math.random() * W, // 雪花x轴位置
						y: Math.random() * H, // 雪花y轴位置
						r: Math.random(10) * 5 + 2, // 雪花的半径
						d: Math.random(10) + 1 // 雪花密度，用于控制下落速度
					});
				}

				setInterval(function drawFlakes() {
					ctx.clearRect(0, 0, W, H);
					ctx.fillStyle = '#fff';
					ctx.beginPath();
					for (var i = 0; i < flakesCount; i++) {
						var flake = flakes[i];
						ctx.moveTo(flake.x, flake.y);
						ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2, true);
					}
					ctx.fill();
					moveFlakes(); // todo: 雪花飘动效果
				},30);
				
				var angle = 0;
				function moveFlakes() {
					angle += 0.03;
					for (var i = 0; i < flakesCount; i++) {
						var flake = flakes[i];
						flake.y += Math.pow(flake.d, 3) + 1;
						var rd = Math.random(10) + 1;
						if (rd <= 5)  flake.x += Math.cos(angle) * 2;
						else flake.x -= Math.cos(angle) * 2;
						if (flake.y > H) {
							flakes[i] = {
								x: Math.random() * W,
								y: 0,
								r: flake.r,
								d: flake.d
							};
						}
					}
				}
			}
		</script>
	</body>
</html>

柏树下

发布了451 篇原创文章 · 获赞 17 · 访问量 1万+

私信关注

canvas编写的雪花飘落景象

猜你喜欢