实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

2023年6月11日上午12:05 • JavaScript

让我来详细讲解一下 “实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码”的完整攻略。

1. 简介

本文将教您如何使用 HTML5 Canvas 绘制炫酷的烟花绽放动画。烟花中的每个小点都是由一颗小小的圆组成，我们将使用 Canvas 绘制这些小圆，然后使用动画效果让它们绽放。在本文中，我们将使用 JavaScript 和 Canvas API 实现这个动画效果。

2. 准备

首先，在 HTML 页面中添加一个 Canvas 元素，设置它的宽度和高度，如下所示：

<canvas id="myCanvas" width="800" height="600"></canvas>

接下来，我们需要在 JavaScript 中获取这个 Canvas 对象，并从中获取绘图上下文。我们可以使用以下代码获取 Canvas 对象：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

3. 绘制烟花

我们将使用随机数来生成烟花的初始位置、大小和颜色，然后使用 Canvas 绘制烟花。

我们可以先定义一个名为 createFirework() 的函数，该函数将创建用于表示烟花的对象，并绘制烟花的小点。

function createFirework() {
    var firework = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.random() * 3 + 1,
        color: "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")",
        vx: Math.random() * 2 - 1,
        vy: Math.random() * 2 - 1,
        fadetime: 60,
        alpha: 1
    };
    fireworks.push(firework);

    // 绘制烟花的小点
    for (var i = 0; i < 30; i++) {
        var spark = {
            x: firework.x,
            y: firework.y,
            vx: Math.random() * 5 - 2.5,
            vy: Math.random() * 5 - 2.5,
            size: Math.random() * 2,
            color: firework.color,
            alpha: 1,
            fadetime: 25
        };
        sparks.push(spark);
    }
}

在 createFirework() 函数中，我们创建一个包含烟花信息的对象，包括烟花的位置、大小、颜色和速度等属性。然后，我们使用 fireworks.push(firework) 将烟花对象加入到一个名为 fireworks 的数组中。

接下来，我们为烟花绘制小点。我们使用 for 循环，创建一个包含 30 个小点信息的对象，并将它们加入到一个名为 sparks 的数组中，调用 ctx.beginPath() 和 ctx.arc() 方法来绘制小圆点，最后使用 ctx.fill() 方法填充颜色。

function drawFireworks() {
    for (var i = 0; i < fireworks.length; i++) {
        var firework = fireworks[i];
        ctx.globalAlpha = firework.alpha;
        ctx.beginPath();
        ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
        ctx.fillStyle = firework.color;
        ctx.fill();
    }
}

4. 绘制烟花的小点

烟花绽放后的小点我们将用 遗忘效果表示它们消散的过程，也就是颜色由刚开始的浓重逐渐变淡，只剩下一个朦胧的痕迹。可以在对象中定义 fadeTime 属性确定小点的生命周期，定义 alpha 属性确定小点颜色的透明度。

function drawSparks() {
    for (var i = 0; i < sparks.length; i++) {
        var spark = sparks[i];
        ctx.globalAlpha = spark.alpha;
        ctx.beginPath();
        ctx.arc(spark.x, spark.y, spark.size, 0, Math.PI * 2);
        ctx.fillStyle = spark.color;
        ctx.fill();
    }
}

5. 更新烟花和小点的位置

这个动画的重点是制定一个可以缓慢的更新每个烟花和小点的位置的方法，在每一帧中进行刷新位置和透明度的操作。

function updateFireworks() {
    for (var i = fireworks.length - 1; i >= 0; i--) {
        var firework = fireworks[i];
        firework.x += firework.vx;
        firework.y += firework.vy;
        firework.fadetime--;
        firework.alpha = firework.fadetime / 60;
        if (firework.fadetime < 0) {
            fireworks.splice(i, 1);
        }
    }
}

function updateSparks() {
    for (var i = sparks.length - 1; i >= 0; i--) {
        var spark = sparks[i];
        spark.x += spark.vx;
        spark.y += spark.vy;
        spark.fadetime--;
        spark.alpha = spark.fadetime / 25;
        if (spark.fadetime < 0) {
            sparks.splice(i, 1);
        }
    }
}

对烟花和小点对象的属性进行递增（速度也相对应变化），增加一个 fadeTime 属性用来减小小点的透明度，以确保自然的消退。还要对数组中的所有烟花和小点进行迭代，看看它们是不是要消失，并在要消失时，从数组中删除这些对象。

6. 构建完整的动画循环

最后，我们需要将上面的步骤结合起来，构建一个完整的动画效果。

function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    createFirework();
    drawFireworks();
    updateFireworks();
    drawSparks();
    updateSparks();
    setTimeout("loop()", 30);
}
loop();

我们使用 ctx.clearRect() 方法在每一帧之前清空 Canvas，以确保上一帧不会对下一帧造成影响。接下来，我们调用 createFirework() 函数创建烟花，然后绘制现有的烟花和小点，并更新它们的位置和透明度。最后，我们使用 setTimeout() 方法在 30 毫秒后重新调用 loop() 函数，以实现动画的连续播放。