Пример реализации фона анимации частиц холста

Без эффекта соединения:

Эффект от подключения:

Добиться такого эффекта на самом деле очень просто и условно можно разделить на следующие этапы:

Во-первых, вам нужно создать тег canvas в родительском элементе, который должен отображать фон частицы, и указать width и height . Когда мы генерируем случайные координаты точки, нам нужно использовать width и height в качестве ссылки. width и height равны ширине и высоте родительского элемента.

 // Если родительский элемент — bodyconst ele = document.body;const Canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// Вставьте тег холста в ele .appendChild (холст);

Случайным образом сгенерируйте определенное количество информации о координатах точки с width и height в качестве ссылки, включая x , y , rateX (скорость перемещения точки по оси X), rateY (скорость перемещения точки по оси Y). , rateX rateY определяют движение точки по траектории.

 const Points = [];// Генерируем случайным образом координаты точек, нужно указать максимальное значение радиуса function getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // Координата x частицы y = Math.ceil(Math.random() * this.height), // Координата y частицы r = +(Math.random() * this.radius).toFixed(4) , // Радиус скорости частицыX = +(Math.random() * 2 - 1).toFixed(4), // Скорость движения частицы в направлении xrateY = +(Math.random() * 2 - 1) .toFixed(4) ); // Скорость движения частицы в направлении y return { x, y, r,rateX,rateY };}//Случайно генерируем информацию о координатах 100 точек для (let i = 0; я < 100; я++) {points.push(this.getPoint());}

Нарисуйте сгенерированный массив точек на холсте.

 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(); //Перемещаем координаты точки в соответствии со скоростьюX и скоростьюY if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) { item.x += item.rateX *rate; item.y += item.rateY *rate } else { // Если движение частицы превышает границу, переместите частица Удалить и восстановить новую точку.points.splice(i, 1);points.push(getPoint(radius));}

Пересеките массив точек и сравните координаты точек. Если расстояние между двумя точками меньше определенного значения, нарисуйте прямую линию между двумя точками. lineWidth изменяется в зависимости от расстояния между двумя точками. , тем тоньше линия.

 // Вычисляем расстояние между двумя точками 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; //Оцениваем координаты центра попарно 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 // Если расстояние между двумя точками меньше 150, рисуем линию if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#fff'; //Чем больше расстояние между двумя точками, тем тоньше линия и наоборот. наоборот ctx.lineWidth = 1 - disPoint / расстояние;

Используйте requestAnimationFrame для вызова метода draw в цикле (метод рисования включает в себя рисование точек и линий) и в то же время меняйте положение точки в соответствии с rateX и rateY во время draw .

 // Вызов функции рисования для запуска анимации (function draw() { ctx.clearRect(0, 0, width, height); drawPoints(); // Если вам не нужно рисовать линии, просто отмените следующую строку код. drawLines(); window.requestAnimationFrame(draw);}());

Полный код см. на странице https://github.com/PengJiyuan/particle-bg.

Мой Github: https://github.com/PengJiyuan

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.