This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

All over the sky fireworks sent to you far away

🎉 I cut a section of the river of stars for you, so that you are not inferior to this sky fireworks

The fireworks all over the sky shine in the bright sky, which makes the sky gorgeous and gives out its infinite light. Today, let’s use Canvas to make a fireworks effect! ✨

Implementation effect

The effect of the realization is very good, the sky fireworks wanton bloom

The implementation process

Simple Html and CSS

Simply write the basic style, the background is black, and define a Canvas tag

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        canvas {
            position: absolute;
            z-index: 0;
        }
    </style>
</head>

<body>
    <canvas>Your browser does not support this</canvas>
    <script src="index.js"></script>
</body>

</html>
Copy the code

2. Create canvas

In JS first get the label, set the canvas size, use resize to listen to the page adjustment, timely change the size of the canvas

// Element fetch
const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d");
// Set the canvas size
function resizeCanvas() {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
}
resizeCanvas();
// Page scaling changes the canvas size
window.addEventListener("resize", resizeCanvas)
Copy the code

3. Obtain the mouse click position

Use E.cadentx and E.cadenty to get the location of the mouse click and use them to generate fireworks at the location of the mouse click

function clickSite(e) {
    // Get the coordinates of the current mouse
    let x = e.clientX;
    let y = e.clientY;
    / / to draw
    addFires(x, y);
}
document.addEventListener('click', clickSite);
Copy the code

4. The primary form of fireworks generated by mouse click

We do it step by step, this is the first step to achieve the fireworks effect, by adding a prototype fireworks at the click location

This is a simple static, and then we slowly move it

function drawFires() {
    // Initial radius, and the number of particles
    let count = 10;
    let radius = 10;
    for (let i = 0; i < count; i++) {
        // Render the current data
        // Here are some math problems
        // moveX, moveY is the starting coordinate of the particle, draw a triangle, Angle radius, and you can easily get the equation
        let angle = 360 / count * i;
        let radians = angle * Math.PI / 180;
        let moveX = x + Math.cos(radians) * radius
        let moveY = y + Math.sin(radians) * radius
        // Start the path
        ctx.beginPath();
        ctx.arc(moveX, moveY, 2.Math.PI * 2.false);
        / / end
        ctx.closePath();
        ctx.fillStyle = '#ff0000'ctx.fill(); }}Copy the code

The current effect

5. Let the fireworks go

With the paving above, each small dot is a firework that is about to be scattered, so we just need to update the canvas to make its radius continuously increase. It is very simple to realize the effect of scattering, and that part of the code is not pasted (to save space). For updating the canvas, A new method adopted in HTML5 is the requestAnimationFrame official document

What advantages does it have over using a timer for animation?

  1. In hidden or invisible elements,requestAnimationFrameThere will be no redraw or backflow, reducing memory usage
  2. requestAnimationFrameAll DOM operations in each frame are aggregated in a single redraw or backflow

Animation implementation code

// Render to update the particle information
function tick() {
    // Update the canvas
    drawFires();
    requestAnimationFrame(tick);
}
tick()
Copy the code

Current implementation effect

6. Achieve the trailing effect and random colors

As can be seen from the renderings above, we have basically achieved the effect of explosion, but fireworks are not a small ball, we need to add the effect of trailing, and give each ball a random color, so that it will be more dazzling

Trailing effect code

After drawing one frame and before drawing the next, add a translucent mask to achieve a trailing effect

function tick() {
    // Set drag
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0,0,0,' + 10 / 100 + ') ';
    ctx.fillRect(0.0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'lighter';
    // Update the canvas
    drawFires();
    requestAnimationFrame(tick);
}
Copy the code

Random color code

The hSLA function is used to set the color, because the color of fireworks are close, so we can adjust the hue value, to choose the color of fireworks. Here is a fixed saturation of 100%, brightness color random in a certain range, so that the color is not too outrageous

The hSLA () function uses hue, saturation, brightness, and transparency to define the color.

let hue = Math.random() * 360;
let hueVariance = 60;
function setColors(firework) {
    firework.hue = Math.floor(Math.random() * ((hue + hueVariance) - (hue - hueVariance))) + (hue - hueVariance);
    firework.brightness = Math.floor(Math.random() * 21) + 50;
    firework.alpha = (Math.floor(Math.random() * 60) + 40) / 100;
}
Copy the code

The current effect

7. Achieve gravity drop of fireworks

From the renderings above, we can realize that we are still two short of the falling fireworks and the disappearance of the fireworks

We through readjusting the fireworks path algorithm, to realize the fireworks fall, in the initial code for fireworks explosion path, USES is the linear motion of the ordinary, we need in the y direction to make it on the basis of increased a little, it will realize the effect of a parabola, at the same time, for the fireworks explosion shall have the effect of out, We do that by changing the transparency, and if the transparency is less than zero we remove it from the array

let moveX = Math.cos(firework.radians) * firework.radius;
let moveY = Math.sin(firework.radians) * firework.radius + 1;
firework.x += moveX;
firework.y += moveY;
// Update the data to spread out the circle
firework.radius *= 1 - firework.speed / 120
firework.alpha -= 0.01;
// Delete the particle if the opacity is less than 0
if (firework.alpha <= 0) {
    fireworks.splice(i, 1);
    // Skip this loop and do not draw
    continue;
}
Copy the code

Changed the algorithm

Each time the canvas is updated, the transparency should be reduced, and the radius of movement of each particle is constantly reduced, which will form a tendency to close to the center. Since each particle is stored in the array, when the transparency of the particle is less than 0, it will be removed from the array

8. Achieve automatic fireworks effect

Only need through the timer, constantly add fireworks can

setInterval(() = > {
    // This can be used several times to increase the number of fireworks
    addFires(Math.random() * canvas.width, Math.random() * canvas.height)
    addFires(Math.random() * canvas.width, Math.random() * canvas.height)
}, 500)
Copy the code

Custom text

You can add some tags to the page, such as text, the effect is good oh ~The fireworks effect here, like to try to do a bar ~~