preface

Today, I will share with you how to use Canvas to achieve particle effects (can be used as a login background). The knowledge points involved are as follows:

  • Canvas
  • requestAnimationFrame

Without further ado, get right to the code

implementation

CSS

* {
    margin: 0;
    padding: 0;
}

canvas {
    display: block;
}

.log {
    position: fixed;
    top: 5px;
    left: 5px;
    right: 0;
    bottom: 0;
}
Copy the code

HTML

<canvas id="canvas"></canvas>
<div class="log"></div>
Copy the code

js

/ / get the dom
const canvas = document.getElementById('canvas');
const log = document.querySelector('.log');
const ctx = canvas.getContext('2d');
const colors = ['#ed1941'.'#f05b72'.'#ef4136'.'#f15a22'.'#8e3e1f'.'#fcaf17'.'#b76f40'.'#00ae9d'.'#009ad6'.'#1d953f'.'#426ab3'.'#6950a1'.'#74787c'.'#2a5caa'];
let w, h;
// Set the canvas width and height
setCanvasSize();
function setCanvasSize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    w = window.innerWidth;
    h = window.innerHeight;
}
window.addEventListener('resize', setCanvasSize);
/** * Get a random number between min (included) and Max (not included) *@param {number} Min Minimum value *@param {number} Max Max *@returns * /
function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}
/** * get the distance between two points *@param {object} A is the first point *@param {object} B the position of the second point *@returns* /
function getDistance(a, b) {
    const x = a.x - b.x;
    const y = a.y - b.y;
    return Math.hypot(x, y); // Math.sqrt(x * x + y * y);
}
// constructor
function Particle() {}// Create the particle function
Particle.prototype.create = function () {
    // Particle radius
    this.radius = getRandom(2.2.4);
    // Particle position
    this.x = getRandom(0 + this.radius, w - this.radius);
    this.y = getRandom(0 + this.radius, h - this.radius);
    // Particle speed
    this.speedX = getRandom(-1.1);
    this.speedY = getRandom(-1.1);
    // Particle color
    this.color = colors[Math.floor(getRandom(0, colors.length))];
}
// Draw the particle function
Particle.prototype.draw = function () {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0.2 * Math.PI);
    ctx.fill();
}
// connect particle functions
Particle.prototype.link = function () {
    for (const particle of particles) {
        const distance = getDistance(this, particle);
        if (distance < 150) {
            ctx.beginPath();
            ctx.lineWidth = 0.1;
            ctx.strokeStyle = this.color;
            ctx.moveTo(this.x, this.y); ctx.lineTo(particle.x, particle.y); ctx.stroke(); }}}// Move the particle function
Particle.prototype.move = function () {
    // Rebound after collision boundary
    if (this.x <= this.radius || this.x + this.radius >= w) {
        this.speedX *= -1;
    }
    if (this.y <= this.radius || this.y + this.radius >= h) {
        this.speedY *= -1;
    }
    this.x += this.speedX;
    this.y += this.speedY;
}
// Array of particles
const particles = [];
for (let i = 0; i < 88; i++) {
    const particle = new Particle();
    particle.create();
    particles.push(particle);
}
/ / animation
function raf() {
    let start;
    function step(timestamp) {
        if (start === undefined) {
            start = timestamp;
        }
        const fps = Math.trunc(1000 / (timestamp - start));
        start = timestamp;
        log.innerHTML = `${fps}FPS`;
        // Empty the canvas
        ctx.clearRect(0.0, w, h);
        // Update particles
        for (const particle of particles) {
            particle.move();
            particle.draw();
            particle.link();
        }
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}
raf();
Copy the code

Demo: jsdemo. Codeman. Top/HTML/partic…

conclusion

The above code to achieve the most basic particle effects. If you want to achieve other cool effects, you can use this code base or refer to the open source library to implement their own.