资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Fireworks Animation

创作时间:

作者:

@小白创作中心

Fireworks Animation

引用

来源

https://docs.pingcode.com/baike/3067243

如何用HTML制作烟花动态图

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

一、HTML结构

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

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

接下来，我们需要为

/* 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进行绘制，并通过动画循环来更新和绘制烟花和粒子，我们可以实现一个简单但效果不错的烟花动画。你可以根据需要进行调整和优化，添加更多效果，使动画更加丰富。