preface

A front-end little aunt asked me , If you want fireworks to be words, how to achieve it , She's going to make one for her boyfriend .

good heavens , This dog food is spilled all over the floor

I can't eat that dog food alone , Share it , Let's eat together .

Interactive topic

Do you have such a programmer sister around you ?

* No, , You made it up
* Yes , I know

First transform the source code of fireworks

The core of the fireworks source code is , When we create fireworks particles , Assigned the origin of fireworks bloom x,y And the radius of circular fireworks radius. When drawing fireworks dynamic effect , Increasing radius , The dynamic effect of fireworks comes out .
// Space limitation , Show only part of the code function createFireworks(x, y) { var count = 100; for (var i =
0; i < count; i++) { var p = {}; p.x = x; p.y = y; p.speed = (Math.random() *
5) + .4; p.radius = p.speed; } } function drawFireworks(){ for (var i = 0; i <
particles.length; i++) { var p = particles[i]; var vx = Math.cos(p.radians) *
p.radius *= 1 - p.speed / 100; } }
But to achieve text fireworks , We have to put the fireworks in the last place from the beginning x,y All coordinates are accurately calculated . So this fireworks drawing , We need to change the logic . stay createFireworks
stage , The starting point of a single particle is calculated x,y And end point fx,fy.

The code is modified as follows
// Space limitation , Show only part of the code function createFireworks(x, y){ var count = 100; for (var i =
0; i < count; i++) { var angle = 360 / count * i; var p = {}; p.x = x; p.y = y;
p.radians = angle * Math.PI / 180; p.radius = Math.random()*81+50; p.fx = x +
function drawFireworks() { for (var i = 0; i < particles.length; i++) { var p =
particles[i]; p.x += (p.fx - p.x)/10; p.y += (p.fy -
p.y)/10-(p.alpha-1)*p.speed; } }
We have finished the first step of transformation , Later, we will write the text on the canvas , And convert it into a lattice array , That is, the end coordinates of all fireworks particles .

Draw text on canvas

adopt canvas of APIgetImageData To get all the dot matrix information in the specified area of the canvas （rgba array ）.

take createFireworks The method transformation is as follows
function createFireworks(x,y,text=""){ if(text!=""){ // Draw text }else{ // Original fireworks code }
}
Pass a text parameter , When this parameter is not empty , We enter the drawing logic of text fireworks .
var fontSize = 120; var textHeight = fontSize; context.font=fontSize+"px
Verdana"; context.fillStyle = "#ffffff"; context.fillText(text,0,textHeight);

Get lattice array

So we can draw the words on the canvas , Then we use getImageData To obtain and cut the lattice information , Because we only need a part of the lattice .
var imgData = textctx.getImageData(0,0,textWidth,textHeight); for (var h = 0;
h < textHeight; h+=gap) { for(var w = 0; w < textWidth; w+=gap){ var position =
(textWidth * h + w) * 4; var r = imgData.data[position], g =
imgData.data[position + 1], b = imgData.data[position + 2], a =
imgData.data[position + 3]; } }
In this way, we get all the dot matrix data of the text drawing area in the canvas , The format of the data is
[r,g,b,a,r,g,b,a,r,g,b,a]
We passed a gap Value to skip interval clipping data . Because the canvas is black , therefore r,g,b All for 0 We won't draw the dot matrix , Now draw the lattice information of the interval into the canvas again .
var fx = x + w - textWidth/2; var fy = y + h - textHeight/2; context.fillStyle
= "#ffffff"; context.fillRect(fx,fy,1,1);
We'll see ~

fantastic , This is the end point information of text fireworks particles we finally need !

Now let's go through all the lattice , And create fireworks particles !
for (var h = 0; h < textHeight; h+=gap) { for(var w = 0; w < textWidth;
w+=gap){ var position = (textWidth * h + w) * 4; var r =
imgData.data[position], g = imgData.data[position + 1], b =
imgData.data[position + 2]; if(r+g+b==0)continue; var p = {}; p.x = x; p.y = y;
p.fx = x + w - textWidth/2; p.fy = y + h - textHeight/2; p.size =
Math.floor(Math.random()*2)+1; p.speed = 1; setupColors(p); particles.push(p);
} }
Text fireworks are coming

thus , Text fireworks effect , We have achieved it !!!

Use it to show love !
createFireworks(x, y,[" Yang Mi "," I love you! "," forever "][Math.floor(Math.random()*3)]);

That's all for today , Xiaobian also prepared a front-end gift bag for Daji 【 Jiajun sheep ：581286372】 Help everyone learn !

Technology
Daily Recommendation
views 1