动态放烟花的前端网页代码

听&夏

已于 2023-04-04 20:24:40 修改

阅读量865

点赞数 1

文章标签：前端 javascript html

于 2023-04-04 20:23:07 首次发布

本文链接：https://blog.csdn.net/weixin_46771472/article/details/129961228

版权

使用JavaScript实现的动态放烟花的前端网页代码，请按照要求复制到HTML文件中：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>动态放烟花</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas"></canvas>
	<script>
        // 获取canvas元素和上下文
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");

        // 设置canvas大小和背景颜色
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		ctx.fillStyle = "#000";
		ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 创建烟花类
		function Firework() {
			this.x = Math.random() * canvas.width; // 烟花的x坐标
			this.y = canvas.height; // 烟花的y坐标
			this.color = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`; // 烟花颜色
			this.radius = 2; // 烟花半径
			this.velocity = { // 烟花速度
				x: Math.random() * 6 - 3,
				y: Math.random() * -15 - 10
			};
			this.gravity = 0.2; // 烟花重力
			this.opacity = 1; // 烟花透明度
			this.trail = []; // 烟花粒子轨迹
		}

        // 更新烟花位置
		Firework.prototype.update = function() {
			this.x += this.velocity.x;
			this.velocity.y += this.gravity;
			this.y += this.velocity.y;
			this.opacity -= 0.02;
			
            // 更新烟花粒子轨迹
			this.trail.push({x: this.x, y: this.y});

            // 删除不需要的烟花粒子
			if (this.trail.length > 15) {
				this.trail.shift();
			}
		}

        // 绘制烟花
		Firework.prototype.draw = function() {
			ctx.globalAlpha = this.opacity;
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
			ctx.fillStyle = this.color;
			ctx.fill();

            // 绘制烟花粒子轨迹
			for (var i = 0; i < this.trail.length; i++) {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.trail[i].x, this.trail[i].y, this.radius, this.radius);
			}
		}

        // 创建烟花数组
		var fireworks = [];

        // 循环绘制烟花
		function loop() {
			setTimeout(function() {
				requestAnimationFrame(loop);
				ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
				ctx.fillRect(0, 0, canvas.width, canvas.height);

                // 随机生成烟花
				if (Math.random() < 0.03) {
					fireworks.push(new Firework());
				}

                // 更新和绘制每个烟花
				for (var i = 0; i < fireworks.length; i++) {
					fireworks[i].update();
					fireworks[i].draw();
					
                    // 删除已经消失的烟花
					if (fireworks[i].opacity <= 0) {
						fireworks.splice(i, 1);
					}
				}
			}, 1000 / 60);
		}

		loop();
	</script>
</body>
</html>

说明：