💞 "I make a wish to the fireworks and hope you will always be by my side"

🌈 "If you don't have enough stars in the sky, go and have a look at the fireworks. The fireworks in the world touch the hearts of all people."

🎨 tips: if you like, you can pay attention to the blogger's private letter code~

⚡ You can also look at the previous two fireworks
Welcome to the blogger's personal website: A mouthful of milk cover

🚩 I invite you to see a romantic fireworks -- fireworks in canvas

🚩 Are you still painting love with canvas? Look, I let your name bloom in the starry sky

This paper realizes the effect

Today's effect is to make the picture into fireworks. Thank you very much for your support~

Realization effect

The implementation method of this small demo is roughly the same as that of text fireworks~

1. Draw the picture on the canvas

First, we need to draw the picture that needs to be made into fireworks on the canvas

Special attention:

1. Since this kind of picture is a base map for color selection, we do not want this picture to be seen by the user. Therefore, we can render this picture on a new canvas and fireworks on different canvases, so that the upper canvas can cover the lower canvas, and this base map will not be seen
2. Since it takes a certain time to load the picture, the code for our operation on the picture needs to be written in the callback function, otherwise the picture may not be loaded and an error will be reported

let img1 = new Image();
//Take a picture at random
img1.src = Math.floor(Math.random()*9 +1) + '.jpg'
// Wait until the picture is loaded and draw the picture
img1.onload = function () {
    let imgWidth = 400
    let imgHeight = 400
    inCtx.drawImage(img1, 0, 0, imgWidth, imgHeight)
}

2. Obtain pixel information

The purpose of this step is to obtain the color of each pixel of the picture, so that we can synthesize a picture through these pixels, or exclude some pixels and screen out the desired graphics

let imgData = inCtx.getImageData(0, 0, imgWidth, imgHeight)

In the previous code, we draw a picture at the position of (0,0). We take out the pixel information of this area through getImageData. The returned result is an object containing pixel information, similar to the following figure. You can see it in detail Last article

3. Add attributes to fireworks particles

The fireworks effect we need to achieve consists of many fireworks particles. Each particle has its own color and its motion trajectory. The key to realizing picture fireworks is that its color needs to be correct. We can store the color of the pixel as the fireworks particle color by traversing the pixel information imageData object, That is, the process of copying the picture bit by bit

for (let h = 0; h < imgHeight; h += 8) {
    for (let w = 0; w < imgWidth; w += 8) {
        let position = (imgWidth * h + w) * 4;
        // The returned array is stored in rgba
        let r = imgData.data[position],
            g = imgData.data[position + 1],
            b = imgData.data[position + 2],
            a = imgData.data[position + 3];
        if (r + g + b == 0) {
            continue
        }
        let firework = {};
        firework.x = x;
        firework.y = y;
        firework.fx = x + w - imgWidth / 2;
        firework.fy = y + h - imgHeight / 2;
        firework.size = 1; // Math.floor(Math.random() * 2) + 1
        firework.speed = 5;
        firework.alpha = 1;
        firework.r = r
        firework.g = g
        firework.b = b
        firework.color = "rgba(" + r + "," + g + "," + b + "," + a + ")"
        fireworks.push(firework)
    }
}

In the process of traversal, because we need to achieve the effect of particles, we need to take one every few pixels. In this way, the drawn image is particle like. We can render the fireworks particles

4. Render fireworks particles

The rendering method is to draw a small circle at the position where the particle should be! Color, position, radius and other information use the attributes previously added to particles, especially the writing format of color~

ctx.beginPath();
ctx.arc(firework.x, firework.y, firework.size, Math.PI * 2, false);
// end
ctx.closePath();
ctx.fillStyle = "rgba(" + firework.r + "," + firework.g + "," + firework.b + "," + firework.alpha + ")"
ctx.fill();

5. Realize fireworks particle animation

We need to shift the current position of the fireworks particles downward during each rendering, reduce the transparency, and achieve the effect of the fireworks falling out. When the transparency will be lower than 0, move out the particles

firework.x += (firework.fx - firework.x) / 10;
firework.y += (firework.fy - firework.y) / 10 -(firework.alpha - 1.8)*firework.speed;
firework.alpha -= 0.02;
// If the transparency is less than 0, delete the particle
if (firework.alpha <= 0) {
    fireworks.splice(i, 1);
    // Skip this loop without drawing
    continue;
}

6. Achieve tailing effect

In order to make the fireworks more realistic, we need to add a trailing effect to the fireworks particles, and create a new mask before each re rendering to achieve the trailing effect

ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0,0,0,' + 10 / 100 + ')';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'lighter';

Fireworks collection

I invite you to see a romantic fireworks -- fireworks in canvas

Are you still drawing grids with canvas? The effect of text fireworks is better

These two articles are to achieve different fireworks effects. Oh, you can learn together! You can pay attention to private bloggers if you need source code~

Here are a few articles on fireworks. Look forward to the blogger's next topic~

Study together and make progress together!