Recently, when I was browsing the nuggets website, I saw a very thoughtful brochure in the nuggets brochure: how to use Canvas to create cool web background effects, so I thought of adding a cool background to my blog. Learn how to use the canvas element.

The effect

The end result can be seen on the blog. Here’s how to do it.

implementation

I suggest those who are not familiar with Canvas to learn from the nuggets booklet. I will not explain it here.

My blog is built with Hexo and uses the Archer theme. The top style author of the blog is defined in layout.ejs file.

<! DOCTYPE html> <html> ... <div class="wrapper">... </div> ... </html>Copy the code

Since you are drawing a cool background inside a canvas, you need to add a Canvas element that is the same size as div:class=”wrapper”.

Ejs file to wrap div:class=”wrapper” and our canvas in a div:

<! DOCTYPE html> <html> ... <div id="container-wrapper-canvas" style="position:relative;">
        <div class="wrapper">... </div> <canvas id="myCanvas" style="position:absolute; left:0; top:0; z-index:0; pointer-events:none;" />
        <script>
        </script>
        ...
    </div>
    ...
</html>
Copy the code

Since we don’t want canvas to respond to click events, we add the following to its style:

pointer-events:none;
Copy the code

Start by defining some variables (all you need to do is shove the following code into the script tag).

// Screen width and heightlet container = document.getElementById('container-wrapper-canvas')
let WIDTH = container.offsetWidth
let HEIGHT = container.offsetHeight
// canvas
let canvas = document.getElementById('myCanvas')
let context = canvas.getContext('2d') // Number of dotsletRoundCount = HEIGHT / 10 // An array of remote pointsletRound = [] // Let canvas cover the screen canvas.width = width canvas.height = heightCopy the code

Construct properties such as dot position, color and size

// Construct dot position color size and other propertiesfunction roundItem(index, x, y) {
    this.index = index
    this.x = x
    this.y = y
    this.r = Math.random() * 4 + 1
    let alpha = (Math.floor(Math.random() * 5) + 1) / 10 / 2
    this.color = "rgba(0,0,0," + alpha + ")"
}
Copy the code

Draw dots

// Draw dots round item.prototype.draw =function() {
    context.fillStyle = this.color
    context.shadowBlur = this.r * 2
    context.beginPath()
    context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false)
    context.closePath()
    context.fill()
}
Copy the code

Here looks very familiar, in android, iOS development custom View encountered similar code, draw in the draw() function, here I think I can use a similar method to draw a similar background in the mobile terminal.

At this point, call the initialization function to see a static dot

// call init();function init() {
    for(var i = 0; i < roundCount; i++ ){
        round[i] = new roundItem(i,Math.random() * WIDTH,Math.random() * HEIGHT);
        round[i].draw();
    }
    animate()
}
Copy the code

To get the dots moving, let’s write down the function below.

// Move dot rounditem.prototype. move =function() {this.y -= this.r / 20 // x direction is divided into two directions, moving speed is proportional to the radius of the dotif(this.index % 2 == 0) {this.x -= 0.08}else{this.x += this.r / 40} // Pull it back if it is out of rangeif (this.y <= 0) {
        this.y += HEIGHT
    }
    if (this.x <= 0) {
        this.x += WIDTH
    }
    if (this.x >= WIDTH) {
        this.x -= WIDTH
    }

    this.draw()
}
Copy the code
// Define the animationfunction animate() {
    context.clearRect(0, 0, WIDTH, HEIGHT);
    for (var i in round) {
        round[i].move()
    }
    requestAnimationFrame(animate)
}
Copy the code

At this point you can see the dynamic dots.

Isn’t it cool? I’ll make it cool when I’m free.