js canvas realizes random particle effects

This article example shares the specific code of js canvas random particle effects for your reference. The specific content is as follows

Preface

Canvas realizes front-end special effects art

Results

Code

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

main.js

/*          
*Particle Class Structure* Class Function:
    *1. Initialization. Create a canvas, specify particle properties, etc.;
    *2. Create an image and draw it *3. Define the area color *4. Particle movement and deflection angle */

// Generate particles let Particle = function(context, options){
    let random = Math.random();
    this.context = context;
    // The x coordinate in the canvas this.x = options.x;
    // y coordinate on the canvas this.y = options.y;
    // Take 1/2 of the random number and randomly enlarge the angle this.s = 0.5 + Math.random();
    // this.s = 1 + Math.random();
    // The changing angle of particle movement this.a = 0;
    //Width this.w = window.innerWidth;
    // Height this.h = window.innerHeight;
    // Radius this.radius = options.radius || 0.5 + Math.random() * 10;
    // Color this.color = options.color || "#E5483F";
    // console.log(this.color);
    //Specify to call after 3 seconds;
    // If the particle radius is greater than 0.5, add new particles.
    setTimeout(function(){
        if (this.radius > 0.5) {
            particles.push(
                new Particle(context, {
                  x: this.x,
                  y: this.y,
                  color: this.radius / 2 > 1 ? "#d6433b" : "#FFFFFF",
                  radius: this.radius / 2.2 })
            );
        }
    }.call(Particle), 3000);
};

// Render image Particle.prototype.render = function() {
        //Start a new path from (0,0);
        this.context.beginPath();
        // Create a curve arc this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        // Drawing line width this.context.lineWidth = 2;
        //Color filling this.context.fillStyle = this.color;
        // Fill the path of the current image this.context.fill();
        // Return to the initial point and draw the line to the initial position this.context.closePath();
};

Particle.prototype.swapColor = function() {
    // Exclude white if (this.color != "#FFFFFF") {
        // Determine the left and right interfaces and assign color values if (this.x < this.w / 2) {
            // Left half this.color = "#36fcfa";            
        } else {
            // Right half this.color = "#E5483F";            
        }
        }
    
};

Particle.prototype.move = function() {
    // Color definition this.swapColor();

    // The horizontal axis is transformed according to the cosine angle and amplified by a random number;
    // Deflection angle so that the two half boundaries are separated this.x += Math.cos(this.a) * this.s;
    this.y += Math.sin(this.a) * this.s;

    // this.y += Math.cos(this.a) * this.s;
    // this.x += Math.sin(this.a) * this.s;
    // After the change, re-take the random angle;
    this.a += Math.random() * 0.8 - 0.4;

    // If all are 0, the particle's horizontal coordinate does not move;
    if (this.x < 0 || this.x > this.w - this.radius) {
      return false;
    }
    // The particle's ordinate does not move;
    if (this.y < 0 || this.y > this.h - this.radius) {
      return false;
    }

    // Redraw the image this.render();

    return true;  
};


let canvas = document.createElement('canvas');
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 30;
document.body.insertBefore(canvas, null);
let context = canvas.getContext('2d');

const conf = {
    frequency: 50,
    x: canvas.width,
    y: canvas.height
};

let particles = [],
    frequency = conf.frequency;

setInterval(function(){
    popolate();
}.bind(null), frequency);

function popolate(){
    particles.push(
        new Particle(context, {
          x: conf.x / 2,
          y:conf.y/2
        })
    );

    return particles.length;
}

function clear() {
    context.globalAlpha = 0.04;
    context.fillStyle = '#000042';
    context.fillRect(0,0,canvas.width, canvas.height);
    context.globalAlpha = 1;
}

function update(){
    particles = particles.filter(p => p.move());
    clear();
    requestAnimationFrame(arguments.callee);
}

update();

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript+html5 canvas to achieve image fragmentation and reorganization animation effects
js canvas realizes starry sky background effect
JavaScript canvas to achieve meteor effects
Teach you to use dozens of lines of js to achieve cool canvas interactive effects

<<: Detailed explanation of the difference between chown and chmod commands in Linux

>>: Mysql master-slave synchronization Last_IO_Errno:1236 error solution