Through the previous article, we know the realization principle of the flat throwing motion of an object in HTML5 canvas. Think about the "explosion" of a fireworks. Its effect is like a collection of horizontal throwing movements of multiple fireworks particles. According to this idea, let's try to achieve the fireworks effect.

Because there are too many shortcomings in the conventional drawing method, to manage the movement of each fireworks particle, it is better to encapsulate a fireworks particle into a "particle object", just like modularizing the production process of a product. After modularization, only the materials needed to produce the product are needed.

First, I encapsulate the previous flat cast Code:

    function Particle() {
        this.x = 100, this.y = 60;
        this.g = 1;
        this.v = 2;
        this.angle = 30;

        this.update = function () {
            //Uniform linear motion
            var vx = Math.cos(this.angle) * this.v;
            this.x += vx;

            //Uniform acceleration linear motion
            var vy = Math.sin(this.angle) * this.v + this.g;
            this.y += vy;
        }

        this.draw = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, 2, 0, 2 * Math.PI);
            ctx.fillStyle = 'hsla(0, 100%, 50%, 1)';
            ctx.fill();
        }
    }

Among them, fireworks particles contain the basic motion parameters, and the drawing and motion of fireworks particles are encapsulated as functions, but these are far from enough.

In real life, fireworks have different colors, and each explosive particle will disperse in different directions at different speeds, because the movement in the air will encounter air resistance. The farther away from the explosion center, the slower the movement speed is. Moreover, it has a life cycle, and will continue to consume energy in the process of lighting. When the last energy is exhausted, it will disappear Lost.

So I enriched the object of fireworks particles:

    //Fireworks particle object, parameter hue is the color value of fireworks particle
    function Particle(hue) {
        //Coordinates of fireworks particle explosion
        this.x = 100, this.y = 60;
        //Acceleration of gravity
        this.g = 1;
        //Random movement speed of fireworks particles, fireworks particles will not appear the same distance of movement strange picture
        this.v = random(2, 4);
        //The movement angle of random fireworks particles, fireworks particles will move to 360 degrees randomly
        this.angle = random(0, Math.PI * 2);
        //Color value of fireworks particles
        this.hue = hue;
        //Brightness of fireworks particles
        this.brightness = random(50, 80);
        //Transparency of fireworks particles
        this.alpha = 1;
        //The transparency attenuation range of random fireworks particles does not show the strange picture that all fireworks particles disappear at the same time
        this.decay = random(0.015, 0.03);

        this.update = function () {
            //Uniform linear motion
            var vx = Math.cos(this.angle) * this.v;
            this.x += vx;

            //Uniform acceleration linear motion
            var vy = Math.sin(this.angle) * this.v + this.g;
            this.y += vy;

            //After the explosion of fireworks, the velocity of particles in the air decays
            this.v *= 0.95;

            //Gradually reduce the transparency of fireworks particles
            this.alpha -= this.decay;
        }

        this.draw = function () {
            //Draw the grain
            ctx.beginPath();
            ctx.arc(this.x, this.y, 2, 0, 2 * Math.PI);
            ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
            ctx.fill();
        }
    }

    function random(min, max) {
        return Math.random() * (max - min) + min;
    }

As can be seen from the code description above, we can simulate the fireworks control very much!

In this way, I can easily add multiple fireworks particles to the canvas. For example, 30 to 50 fireworks particles can appear when one fireworks explodes:

var particlesCount = random(30, 50)
var hue = random(0, 330);
for (var i = 0; i < particlesCount; i++) {
    new Particle(hue)；
}

Next, we define an array to uniformly manage these fireworks particles, and use a timer to run the entire animation:

    var particles = []
    var particlesCount = random(30, 50)

    setInterval(function () {
        ctx.clearRect(0, 0, 200, 200);
        
        //When there are no fireworks particles, ignite new fireworks
        if (particles.length == 0) {
            var hue = random(0, 330);
            for (var i = 0; i < particlesCount; i++) {
                particles.push(new Particle(hue));
            }
        }

        //Continuously update the status of each fireworks particle
        for (var i = 0; i < particles.length; i++) {
            particles[i].update();
            particles[i].draw();
            
            //When a fireworks particle disappears, destroy the fireworks
            if (particles[i].alpha <= particles[i].decay) {
                particles.splice(i, 1);
            }
        }
    }, 1000 / 60)

The fireworks finally exploded, but the effect was a little bit wrong, as if a little tail was missing.

In the code, we clear the canvas before drawing every frame. If we want to add a small tail, it's very simple. It's not to clear the canvas, but to cover a new layer of transparent sky.

The code:
ctx.clearRect(0, 0, 200, 200);

Replace it with:
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.fillRect(0, 0, 200, 200);

Final code:

<html>
<body>
    <canvas id="myCanvas" width="200" height="200" style="background-color: black;">
        Your browser does not support canvas, please upgrade your browser
    </canvas>
</body>
</html>

<script>
    //Prepare canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    function random(min, max) {
        return Math.random() * (max - min) + min;
    }

    //Fireworks particle object, parameter hue is the color value of fireworks particle
    function Particle(hue) {
        //Coordinates of fireworks particle explosion
        this.x = 100, this.y = 60;
        //Acceleration of gravity
        this.g = 1;
        //Random movement speed of fireworks particles, fireworks particles will not appear the same distance of movement strange picture
        this.v = random(2, 4);
        //The movement angle of random fireworks particles, fireworks particles will move to 360 degrees randomly
        this.angle = random(0, Math.PI * 2);
        //Color value of fireworks particles
        this.hue = hue;
        //Brightness of fireworks particles
        this.brightness = random(50, 80);
        //Transparency of fireworks particles
        this.alpha = 1;
        //The transparency attenuation range of random fireworks particles does not show the strange picture that all fireworks particles disappear at the same time
        this.decay = random(0.015, 0.03);

        this.update = function () {
            //Uniform linear motion
            var vx = Math.cos(this.angle) * this.v;
            this.x += vx;

            //Uniform acceleration linear motion
            var vy = Math.sin(this.angle) * this.v + this.g;
            this.y += vy;

            //After the explosion of fireworks, the velocity of particles in the air decays
            this.v *= 0.95;

            //Gradually reduce the transparency of fireworks particles
            this.alpha -= this.decay;
        }

        this.draw = function () {
            //Draw the grain
            ctx.beginPath();
            ctx.arc(this.x, this.y, 2, 0, 2 * Math.PI);
            ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
            ctx.fill();
        }
    }

    var particles = []
    var particlesCount = random(30, 50)

    setInterval(function () {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
        ctx.fillRect(0, 0, 200, 200);
        
        //When there are no fireworks particles, ignite new fireworks
        if (particles.length == 0) {
            var hue = random(0, 330);
            for (var i = 0; i < particlesCount; i++) {
                particles.push(new Particle(hue));
            }
        }

        //Continuously update the status of each fireworks particle
        for (var i = 0; i < particles.length; i++) {
            particles[i].update();
            particles[i].draw();
            
            //When a fireworks particle disappears, destroy the fireworks
            if (particles[i].alpha <= particles[i].decay) {
                particles.splice(i, 1);
            }
        }
    }, 1000 / 60)


</script>

Your browser does not support canvas, please upgrade your browser