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!

💞 “selling sound in the world and so on gather up enough stars to put fireworks for you to see”

Last time the fireworks have a little dull, this time to enlarge the trick, let your name bloom in the sky!

Like if you can private message source to dry dog food oh ~

Full energy, no urine point, part of the content in the last article oh ~

Implementation effect

You think that’s it? There’s more to it

The implementation process

1. Draw text on the canvas

Font is used to set the size of the font and the font, then the color is filled, and then the canvas is drawn by ctx.fillText. There are a few things to note here:

Note:

  1. ctx.fontAt least two parameters are required, one for font size and one for font
  2. The reason why I set the color here to be zero# 000001The reason for this is that the background is black, so the word can’t be seen, but it’s real, otherwise every time you click on it there will be a font in the upper left corner, which will affect the visual, or you can create a new font on a canvas, which is simple
  3. ctx.measureText(text): returns an object containing pixelsSpecify font width.
// Fill the font style
let font = 120
ctx.font = font + "Px Microsoft Yahei"
ctx.fillStyle = "# 000001"
/ / content
let text = 'Xiao Cheng'
// Get the width of the font
let textWidth = ctx.measureText(text).width
// Fill the upper left corner with a font
ctx.fillText(text,0 , font)
Copy the code

2. Get pixels

GetImageData is used to retrieve pixel data in an area and return an imageData object

For each pixel in an ImageData object, there are four facets of information, namely the RGBA value:

  • R-red (0-255)
  • G – Green (0-255)
  • B – Blue (0-255)
  • A-alpha channels (0-255; 0 is transparent, 255 is fully visible)

In the previous code we drew the font at (0,0), and we used getImageData to extract the pixel information in this area.

let imgData = ctx.getImageData(0.0, textWidth, font * 1.2)
Copy the code

If we look at imgData first, you can see that the data inside is huge, and it stores information in pixels

So we can make the particle effect by judging the pixels

3. Realize text particle

We have in the above step will get the text of the pixel information, also is the equivalent of us to copy a word, we can traverse the entire imgData. Data array can map out the original text, that we want to achieve the effect of particle, requires every few pixels to draw, so deal with graphics is a particle effect, The reason is that some of the pixels are not rendered

for (let h = 0; h < font * 1.2; h += 6) {
    for (let w = 0; w < textWidth; w += 6) {
        let position = (textWidth * h + w) * 4;
        // The returned array is stored in rGBA mode
        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
        }
        // Firework code}}Copy the code

In the above code block, traverse from left to right, from top to bottom, through all of the graphics area pixel information, r, g, b, a corresponding to a certain pixel color, when the color is not black, we don’t operate it, skip this cycle, when the color is not black, use of it.in this information to generate a fireworks particles

let firework = {};
firework.x = x;
firework.y = y;
firework.fx = x + w - textWidth / 2;
firework.fy = y + h - font / 2;
firework.size = Math.floor(Math.random() * 2) + 1;
firework.speed = 1;
setColors(firework);
fireworks.push(firework);
Copy the code

The fireworks particle object is stored in the fireworks array

4. Set the particle animation

Now that we have a whole array of fireworks about to burst, we just need to animate them and reduce the opacity by changing the coordinates of the current particles each time we render until the opacity of the fireworks particles drops to zero

The key code

firework.x += (firework.fx - firework.x) / 10;
firework.y += (firework.fy - firework.y) / 10 - (firework.alpha - 1) * firework.speed;
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

5. Set the trailing and render the update canvas

The idea behind the trailing implementation is to continually add a semi-transparent mask to the implementation. The difference between using a requestAnimationFrame and a timer was explained in the previous article

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

conclusion

Today’s fireworks here to reflect the end, not enough, can let us look forward to the next picture fireworks effect oh ~ Moore manor fireworks is also very beautiful oh!