雪花飘飘

Posted 2020-11-10 longhua-0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了雪花飘飘相关的知识，希望对你有一定的参考价值。

<!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

以上是关于雪花飘飘的主要内容，如果未能解决你的问题，请参考以下文章

2023跨年烟花（浪漫烟花+美妙音乐+雪花飘飘）含前端源码直接下载---系列最终篇

圣诞树的雪花飘飘（结尾附源码）

Silverlight & Blend动画设计系列十三：三角函数（Trigonometry）动画之飘落的雪花（Falling Snow）

香飘飘，怎样才能再飘起来？