preface

Earlier I posted a tutorial on how to use native JS to develop fireworks effects in a web page.

Unexpectedly, a front-end little aunt asked me how to achieve if you want fireworks to be text, she wants to make one for her boyfriend.

Boy, there’s dog food all over the floor

I can’t eat that dog food by myself. Share it. We can all eat it.

This article is accompanied by a video tutorial to make dog food even better.

Interactive topic

Do you have such a programmer sister?

  1. No, you made it up
  2. Yes, I do

Click to vote

First change the fireworks source code

The core of the previous fireworks source is that when we create fireworks particles, we assign the origin x, Y and radius of the round fireworks. When drawing the dynamic effect of fireworks, the radius is increasing, the dynamic effect of fireworks will come out.

// Limited space, only part of the code is shown
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; }}Copy the code

But to realize the text fireworks, we have to start the fireworks at the end of the X,y coordinates all accurately calculated. So this fireworks drawing, we’re going to change the logic. In the createFireworks stage, the starting point x,y and ending point fx,fy of a single particle are calculated.

The code has been modified as follows

// Limited space, only part of the code is shown
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; }}Copy the code

This completes the first step of our transformation, which is to write the text on the canvas and convert it to a lattice array, which is the destination coordinates of all the fireworks particles.

Canvas drawing text

In fact, the principle is the same as in the previous article on BadApple character art with Javascript. Canvas APIgetImageData to get all the lattice information (RGBA array) in the specified area of the canvas.

Transform the createFireworks method as follows

function createFireworks(x,y,text=""){
    if(text! ="") {// Draw text
    }else{
        // The original fireworks code}}Copy the code

Pass a text argument, and when this argument is not empty, we enter the text fireworks drawing logic.

var fontSize = 120;
var textHeight = fontSize;
context.font=fontSize+"px Verdana";
context.fillStyle = "#ffffff";	
context.fillText(text,0,textHeight);
Copy the code

Gets the bitmatrix 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(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]; }}Copy the code

So we get all the dot matrix data for the text drawing area of the canvas in the format of

[r,g,b,a,r,g,b,a,r,g,b,a]
Copy the code

We jump the interval clipping data with a gap value. Since the canvas is black, we will not draw the lattice with r,g, and b equal to 0. Now we will draw the lattice information of the interval onto the canvas again.

var fx = x + w - textWidth/2;
var fy = y + h - textHeight/2;

context.fillStyle = "#ffffff";
context.fillRect(fx,fy,1.1);
Copy the code

We will see ~

Great, this is the final message we need for the text fireworks particles!

Now let’s go through the entire lattice and create firework 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); }}Copy the code

Word fireworks are coming

So far, the text fireworks effect, we will achieve!!

Make love with it!

createFireworks(x, y,["Yang"."I love you."."Forever"] [Math.floor(Math.random()*3)]);
Copy the code

Watch me get the source code

Wechat search “da Shuai Lao Ape” and reply to “fireworks” to obtain the full source of this article