Shulou(Shulou.com)06/03 Report--

How to use JS code to achieve text fireworks special effects, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

I previously published a tutorial on how to use native JS to develop fireworks effects on a web page.

Image.png

Unexpectedly, a front-end aunt asked me how to make one for her boyfriend if she wanted the fireworks to come out in words.

Boy, the dog spilled food all over the floor.

I can't eat that dog food alone. Share it and eat it together.

Dog food tastes better while eating.

First modify the source code of fireworks

The core of the previous fireworks source code is that when we created the fireworks particles, we assigned the origin of the fireworks and the radius of the circular fireworks radius. When drawing the dynamic effect of fireworks, the radius increases continuously, and the dynamic effect of fireworks comes out.

/ / Space limit, showing 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; var vy = Math.sin(p.radians) * p.radius + 0.4; p.x += vx; p.y += vy; p.radius *= 1 - p.speed / 100; } } 但要实现文字烟花，我们一开始就要把烟花最后的x,y坐标全部精确的计算出来。所以这个烟花的绘制，我们要更改一下逻辑。在createFireworks阶段，就计算出单个粒子的起点x,y和终点fx,fy。 代码修改后如下 //篇幅限制，仅展现部分代码 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 + Math.cos(radians) * p.radius; p.fy = y + Math.sin(radians) * p.radius; } } 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; } } 这样我们就完成了第一步改造，后续我们要把文字写在画布上，并且将其转换为点阵数组，也就是所有烟花粒子的终点坐标。 画布绘制文字 其实和之前那篇《使用Javascript制作BadApple字符画视频》的原理是一样的。通过canvas的APIgetImageData来获得画布指定区域内的全部点阵信息(rgba数组)。 将createFireworks方法改造如下 function createFireworks(x,y,text=""){ if(text!=""){ //绘制文字 }else{ //原有的烟花代码 } } 传递一个text参数，当此参数不为空时，我们进入文字烟花的绘制逻辑。 var fontSize = 120; var textHeight = fontSize; context.font=fontSize+"px Verdana"; context.fillStyle = "#ffffff"; context.fillText(text,0,textHeight);

Image.png

Get lattice array

So we can draw the words on the canvas, and then we use getImageData to get and crop the lattice information, because we only need part of the lattice.

Var imgData = textctx.getImageData; 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 in the text drawing area of the canvas in the format of

[r,g,b,a,r,g,b,a,r,g,b,a]

We use a gap value to jump the interval cropping data. Because the canvas is black, we will not draw the lattice in which both rmag and b are 0. Now we will draw the interval lattice information 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 ~

Image.png

Image.png

Great, this is the final word fireworks particles we need to end information ah!

Now let's traverse all the lattices 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);}}

Here comes the fireworks.

At this point, the text fireworks effect, we have achieved!

2021-05-03 21_27_34.gif

Use it to show love!

CreateFireworks (x, y, ["Yang Mi", "I love you", "forever"] [Math.floor (Math.random () * 3)])

2021-05-03 22_26_55.gif

This is the answer to the question about how to use JS code to achieve text fireworks effects. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.