如何用html制作烟花动态图

如何用HTML制作烟花动态图

要用HTML制作烟花动态图，可以使用HTML、CSS、JavaScript。其中，JavaScript 是核心，用于绘制动画和处理动态效果。本文将逐步教你如何实现这一效果。

一、HTML结构

在制作烟花动态图之前，我们需要先搭建基本的HTML结构。HTML文档中包括一个用于绘制烟花的<canvas>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworks Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

接下来，我们需要为<canvas>元素设置样式，使其覆盖整个屏幕，并设置背景颜色。

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
}

三、JavaScript实现烟花效果

JavaScript 是实现烟花动态图的核心部分。我们将使用Canvas API进行绘制，并通过动画循环实现动态效果。

1、获取Canvas上下文

首先，我们需要获取Canvas的上下文，以便后续绘制图形。

// script.js
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

2、创建烟花类

创建一个烟花类，用于生成和绘制烟花。

class Firework {
    constructor(x, y, targetX, targetY) {
        this.x = x;
        this.y = y;
        this.targetX = targetX;
        this.targetY = targetY;
        this.distanceToTarget = this.calculateDistance(x, y, targetX, targetY);
        this.distanceTraveled = 0;
        this.coordinates = [];
        this.coordinateCount = 3;
        while (this.coordinateCount--) {
            this.coordinates.push([this.x, this.y]);
        }
        this.angle = Math.atan2(targetY - y, targetX - x);
        this.speed = 2;
        this.acceleration = 1.05;
        this.brightness = Math.random() * 50 + 50;
    }
    calculateDistance(x1, y1, x2, y2) {
        const xDistance = x2 - x1;
        const yDistance = y2 - y1;
        return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
    }
    update(index) {
        this.coordinates.pop();
        this.coordinates.unshift([this.x, this.y]);
        if (this.speed >= 1) {
            this.speed *= this.acceleration;
        }
        const vx = Math.cos(this.angle) * this.speed;
        const vy = Math.sin(this.angle) * this.speed;
        this.distanceTraveled = this.calculateDistance(this.x + vx, this.y + vy, this.x, this.y);
        if (this.distanceTraveled >= this.distanceToTarget) {
            fireworks.splice(index, 1);
            createParticles(this.targetX, this.targetY);
        } else {
            this.x += vx;
            this.y += vy;
        }
    }
    draw() {
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
        ctx.lineTo(this.x, this.y);
        ctx.strokeStyle = `hsl(${hue}, 100%, ${this.brightness}%)`;
        ctx.stroke();
    }
}

3、创建粒子类

粒子类用于生成烟花爆炸效果。

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.coordinates = [];
        this.coordinateCount = 5;
        while (this.coordinateCount--) {
            this.coordinates.push([this.x, this.y]);
        }
        this.angle = Math.random() * Math.PI * 2;
        this.speed = Math.random() * 10 + 1;
        this.friction = 0.95;
        this.gravity = 1;
        this.hue = Math.random() * 360;
        this.brightness = Math.random() * 50 + 50;
        this.alpha = 1;
        this.decay = Math.random() * 0.03 + 0.01;
    }
    update(index) {
        this.coordinates.pop();
        this.coordinates.unshift([this.x, this.y]);
        this.speed *= this.friction;
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed + this.gravity;
        this.alpha -= this.decay;
        if (this.alpha <= this.decay) {
            particles.splice(index, 1);
        }
    }
    draw() {
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
        ctx.lineTo(this.x, this.y);
        ctx.strokeStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${this.alpha})`;
        ctx.stroke();
    }
}

4、烟花和粒子数组

我们需要两个数组来存储生成的烟花和粒子。

let fireworks = [];
let particles = [];
let hue = 120;

5、创建烟花和粒子

定义函数来生成烟花和粒子。

function createParticles(x, y) {
    let particleCount = 30;
    while (particleCount--) {
        particles.push(new Particle(x, y));
    }
}

6、动画循环

定义动画循环来更新和绘制烟花和粒子。

function loop() {
    requestAnimationFrame(loop);
    hue += 0.5;
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'lighter';
    let i = fireworks.length;
    while (i--) {
        fireworks[i].draw();
        fireworks[i].update(i);
    }
    let j = particles.length;
    while (j--) {
        particles[j].draw();
        particles[j].update(j);
    }
    if (timerTick >= timerTotal) {
        const startX = canvas.width / 2;
        const startY = canvas.height;
        const targetX = Math.random() * canvas.width;
        const targetY = Math.random() * canvas.height / 2;
        fireworks.push(new Firework(startX, startY, targetX, targetY));
        timerTick = 0;
    } else {
        timerTick++;
    }
}
let timerTick = 0;
let timerTotal = 80;
loop();

四、调整和优化

到这一步，我们已经完成了基本的烟花动画效果。你可以根据需要进行调整和优化，比如调整烟花的数量、速度、颜色等。

1、调整烟花数量

你可以通过修改timerTotal的值来控制烟花生成的频率。

let timerTotal = 60; // 频率更高

2、调整颜色

你可以通过修改hue的值来改变烟花的颜色。

hue = 200; // 蓝色调

3、添加更多效果

你可以进一步扩展和优化代码，添加更多效果，比如声音、不同类型的烟花动画等。

五、总结

用HTML制作烟花动态图涉及HTML、CSS、JavaScript，其中JavaScript是实现动态效果的核心。通过创建烟花类和粒子类，使用Canvas API进行绘制，并通过动画循环来更新和绘制烟花和粒子，我们可以实现一个简单但效果不错的烟花动画。你可以根据需要进行调整和优化，添加更多效果，使动画更加丰富。

如需更高效的项目管理和协作，可以考虑使用研发项目管理系统PingCode或通用项目协作软件Worktile来提升团队的协作效率和项目管理水平。