๐ "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:
- 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
- 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!