This is the 10th day of my participation in the August Text Challenge.More challenges in August

preface

He who walks slowest,

As long as he stays on target,

And walk faster than those who wander aimlessly.

– lai

introduce

I believe that a lot of new partners have seen the code rain effect, at that time did not feel with those gods, I am no exception, feel a lifetime can not chase, in fact, as long as down-to-earth unremitting go, plus some self-confidence so they can achieve a variety of effects. It means calm down, everyone. It’s getting creepy.

This is the first front-end effect I saw before entering the line, recently realized, found that is the most simple one of many effects animation, our code rain effect will be from the structure, text parameters, draw text falls and other steps to achieve.

Set out

1. Structural construction

<canvas id="canvas"></canvas>
<script type="module" src="./app.js"></script>
Copy the code

Let’s put a canvas element and use the Module pattern to introduce the main logic.

* {
    padding: 0;
    margin: 0;
}

html.body {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
#canvas {
    width: 100%;
    height: 100%;
}
Copy the code

Let’s write some MORE CSS to fill the screen.

/*app.js*/
class Application {
  constructor() {
    this.canvas = null;         / / the canvas
    this.ctx = null;            / / environment
    this.w = 0;                 / / canvas width
    this.h = 0;                 / / the canvas
    this.size = 18;             // Font size
    this.codeList = [];         // Location list
    this.init();
  }
  init() {
    / / initialization
    this.canvas = document.getElementById("canvas");
    this.ctx = this.canvas.getContext("2d");
    window.addEventListener("resize".this.reset.bind(this));
    this.reset();
    this.render();
  }
  reset() {
    // Window size changes
    this.w = this.canvas.width = this.ctx.width = window.innerWidth;
    this.h = this.canvas.height = this.ctx.height = window.innerHeight;
  }
  render() {
    / / the main rendering
    this.step()
  }
  drawCodeRain() {
     // Draw code rain
  }
  drawBackground() {
     // Draw the transition background
  }
  step(delta) {
    / / redraw
    requestAnimationFrame(this.step.bind(this));
    this.drawBackground();
    this.drawCodeRain(); }}window.onload = new Application();
Copy the code

2. Text parameters

We draw the code text first to consider, he has the text, here we can also define their own, of course I for the sake of brevity (lazy), using the code generated string, after the font directly said. All we have defined is its initialization location and the number of spawns.

/*app.js*/
reset() {
    this.w = this.canvas.width = this.ctx.width = window.innerWidth;
    this.h = this.canvas.height = this.ctx.height = window.innerHeight;
    const { w, h, ctx, size, codeList } = this;
    ctx.fillStyle = 'rgba (0,0,0,1)';
    ctx.fillRect(0.0, w, h);
    codeList.length = 0;
    for (let i = 0, len = ~~(w / size); i < len; i++) {
        codeList.push({
            x: i,
            y: ~ ~ (Math.random()*h*.05)*-size
        })
    }
}
Copy the code

We define the generation of these parameters in the initialization window change event so that each time we change the form we redefine the current position and amount and overlay a black background. To get the number, divide the current screen width by the current font size to get how many it takes to fill a screen. So the X-axis will be marked with I, and the Y-axis will be drawn later and it will sum up one by one, but the initial expectation is that it will start at a different position, so it will look a little bit more scattered, not start at the same place and end at the same place.

3. Text drawing

/*app.js*/
drawCodeRain() {
    const { w, h, ctx, codeList, size } = this;
    ctx.fillStyle = '#0f0';
    ctx.font = `${size}px serif`;
    codeList.forEach(point= > {
        let _code = String.fromCharCode(97+ ~ ~ (29 * Math.random()));
        ctx.fillText(_code, size * point.x + size/2, point.y);
        if (point.y > size * h * Math.random() + h / 3) {
            point.y = 0;
        } else{ point.y += size; }})}Copy the code

We’re going to draw code words here, so we’re going to do it in green, and we’re going to put the font size in there. I’m going to iterate through it with the generated text position array, using the lazy fromCharCode to generate text from the corresponding ASCII code (97 for the letter A), and pick a random value from it. And then let’s draw it. After drawing, the y axis of the current column will increase by a fixed value so that it will be drawn to the next row and so on. Of course, we’re not going to let it go on indefinitely, so we give it a random height and then start drawing from zero.

Now we have a problem:

Fonts are there, but they don’t disappear. They overlap. How do we solve this?

There are two ideas, one is to draw text plus a transparent animation timer.

There is also the simplest use of drawing a transparent black background layer constantly over him, to achieve a camouflage.

Let’s use the second option:

/*app.js*/
drawBackground() {
    const { w, h, ctx } = this;
    ctx.fillStyle = 'rgba (0, 0, 075).';
    ctx.fillRect(0.0, w, h);
}
Copy the code

Each time we draw a layer of 0.075 transparent black layer, so we achieved the effect of gray drop simple ~

This is a pretty spooky effect, but it’s so easy to implement, online demo

expand

We can do a lot of things with layers, like fruit ninja’s tail effect, or fireworks particles. Can try, pretty have a sense of achievement ~

At the beginning of the line was scared to frighten the effect of urine, but the courage to give their point of confidence, the effect is actually that thing ~~