Implementation example of canvas particle animation background

Without connection effect:

The effect of connecting:

To achieve such an effect is actually very simple and can be roughly divided into the following steps:

First, you need to create a canvas tag in the parent element that needs to display the particle background, and specify width and height . When we generate random point coordinates, we need to use width and height as a reference. width and height are equal to the width and height of the parent element.

 // If the parent element is bodyconst ele = document.body;const canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// Insert the canvas tag into ele.appendChild (canvas);

Randomly generate a certain amount of point coordinate information with width and height as reference, including x , y , rateX (the moving rate of the point on the X-axis), rateY (the moving rate of the point on the Y-axis), rateX and rateY determine the movement of the point trajectory.

 const points = [];// Randomly generate the coordinates of points, you need to specify the maximum value of radius function getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // The x coordinate of the particle y = Math.ceil(Math.random() * this.height), // The y coordinate of the particle r = +(Math.random() * this.radius).toFixed(4), // The radius of the particle rateX = +(Math.random() * 2 - 1).toFixed(4), // The rate of particle movement in the x direction rateY = +(Math.random() * 2 - 1).toFixed(4) ); // The rate of particle movement in the y direction return { x, y, r, rateX, rateY };}// Randomly generate the coordinate information of 100 points for (let i = 0; i < 100; i++) { points.push(this.getPoint());}

Draw the generated point array onto the canvas

 function drawPoints() { points.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; ctx.fill(); //Move the coordinates of the point according to rateX and rateY if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) { item.x += item.rateX * rate; item.y += item.rateY * rate; } else { // If the particle movement exceeds the boundary, move the particle Remove and regenerate a new point. points.splice(i, 1); points.push(getPoint(radius)); } });}

Traverse the point array and compare the coordinates of the points. If the distance between the two points is less than a certain value, draw a straight line between the two points. lineWidth changes with the distance between the two points. The greater the distance, the thinner the line.

 // Calculate the distance between two points function dis(x1, y1, x2, y2) { var disX = Math.abs(x1 - x2), disY = Math.abs(y1 - y2); return Math.sqrt(disX * disX + disY * disY);}function drawLines() { const len ​​= points.length; //Judge the center coordinates in pairs for(let i = 0; i < len; i++) { for(let j = len - 1; j >= 0; j--) { const x1 = points[i].x, y1 = points[i].y, x2 = points[j]. x, y2 = points[j].y, disPoint = dis(x1, y1, x2, y2); // If the distance between two points is less than 150, draw a line if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#fff'; //The greater the distance between two points, the thinner the line, and vice versa ctx.lineWidth = 1 - disPoint / distance; ctx.stroke(); } } }}

Use requestAnimationFrame to call the draw method in a loop (the draw method includes drawing points and lines), and at the same time change the position of the point according to rateX and rateY during draw .

 // Call the draw function to start the animation (function draw() { ctx.clearRect(0, 0, width, height); drawPoints(); // If you do not need to draw lines, just cancel the following line of code. drawLines(); window.requestAnimationFrame(draw);}());

For the complete code, please see: https://github.com/PengJiyuan/particle-bg

My Github: https://github.com/PengJiyuan

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.