canvas绘制流星雨

最新推荐文章于 2024-05-02 13:12:02 发布

小董大咖

最新推荐文章于 2024-05-02 13:12:02 发布

阅读量151

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/ddf__/article/details/128500006

这段代码使用HTML5的canvas元素和JavaScript实现了一个流星雨的动态效果。通过获取canvas上下文，设置画布尺寸，以及随机生成文本和下落速度，创建了满屏飘落的流星效果。每颗流星在达到画布底部或随机概率下消失后重新从顶部开始下落。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <canvas id="canvas"></canvas>

<script>
      var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			canvas.height = window.innerHeight;
			canvas.width = window.innerWidth;
			var texts = "流星雨".split("");
			var fontSize = 16;
			var columns = canvas.width / fontSize;
			var drops = [];
			for (var x = 0; x < columns; x++) {
				drops[x] = 1;
			}
			function draw() {
				ctx.fillStyle = "rgba(0,0,0,0.05)";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				ctx.fillStyle = "#0f0";
				ctx.font = fontSize + "px arial";
				for (var i = 0; i < drops.length; i++) {
					var text = texts[Math.floor(Math.random() * texts.length)];
					ctx.fillText(text, i * fontSize, drops[i] * fontSize);
 
					if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
						drops[i] = 0;
					}
					drops[i]++;
				}
			}
			setInterval(draw, 33);
    </script>