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

💞 “I make a wish to fireworks that you will always be by my side”

🌈 “not enough stars in the sky then go to see fireworks, human fireworks, the most touching people”

🎨 tips: like you can pay attention to the private code of the blogger oh ~

⚡ can also see the front two fireworks oh

🚩 invites you to watch a romantic fireworks – canvas fireworks

🚩 Are you still drawing hearts on canvas? Watch me make your name shine on the stars

Effect of this paper

Today’s effect is to make the picture into fireworks, thank you very much for your support ~

Implementation effect

This small demo implementation is roughly the same as the text fireworks implementation

1. Paint the picture on canvas

First of all, we need to draw the picture we need to make into fireworks on the canvas

Special attention:

  1. We don’t want this image to be seen by the user because this image is used as a base for color capture, so we can render this image on a new canvas, and the fireworks render on a different canvas, so that the top canvas can cover the bottom canvas, and this base image will not be seen
  2. Since images take some time to load, we need to write the code for the image operation in the callback function, otherwise the image may not load and error
let img1 = new Image();
// Select a random image
img1.src = Math.floor(Math.random()*9 +1) + '.jpg'
// Wait for the image to finish loading
img1.onload = function () {
    let imgWidth = 400
    let imgHeight = 400
    inCtx.drawImage(img1, 0.0, imgWidth, imgHeight)
}
Copy the code

2. Obtain pixel information

The purpose of this step is to get the color of each pixel of the image, so that we can make a composite image from these pixels, and also exclude some pixels to screen out the desired shape

let imgData = inCtx.getImageData(0.0, imgWidth, imgHeight)
Copy the code

In the previous code, we drew a picture at the position (0,0). We extracted the pixel information of this area through getImageData. The returned result is an object containing the pixel information, similar to the following figure, as detailed in the previous article

3. Add attributes to firework particles

We need to implement by lots of fireworks fireworks effect of particles, each particle has its own color and its trajectory, the key lies in its color to realize image fireworks need to correct, we can traverse imageData object pixel information, the pixel color as the fireworks are stored by the particle color This is the process of copying the image one by one

for (let h = 0; h < imgHeight; h += 8) {
    for (let w = 0; w < imgWidth; w += 8) {
        let position = (imgWidth * h + w) * 4;
        // The array returned is rGBA stored
        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)
    }
}
Copy the code

In the process of traversal, we need to achieve the effect of particles, so we need to take one every few pixels, so that the drawn image is like particles, we can render the fireworks particles

4. Render firework particles

The rendering method is to draw a small circle where the particles should be! Color, position, radius, etc., use the properties previously added to the particle, especially the color format

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();
Copy the code

5. Achieve fireworks particle animation

We need to shift the current position of the firework particles downward on each rendering, reduce the opacity to achieve the effect of the firework falling to the end, and remove the particles when the opacity drops below 0

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

6. Implement the drag effect

To make the fireworks more realistic, we need to add a trailing effect to the firework particles and create a new layer before each re-render 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';
Copy the code

The fireworks collection

Invite you to watch a romantic fireworks – canvas fireworks

Are you still drawing grids on canvas? Text fireworks work better

These two articles are to achieve different fireworks effect oh, we can learn together oh! Need source can pay attention to private letter blogger oh ~

That’s the end of fireworks, look forward to the blogger’s next feature

Study together and make progress together!