Недавно я увидел анимацию с сетью частиц очень ослепительной, и я сделал ее, и это было довольно хорошо, как и фон. CSDN не может загрузить более 2 м.
Давайте начнем говорить, как добиться этого эффекта:
Прежде всего, конечно, добавьте холст:
<canvas id = canvas> </canvas>
Следующий стиль:
<style> #canvas {position: Absolute;Роль Z -индекса: -1 из холста выше заключается в том, что он может быть размещен под фоном некоторых элементов.
Чтобы гарантировать, что холст может быть заполнен всем браузером, необходимо установить широкую высоту холста на то же самое, что и браузер:
Function getSize () {w = canvas.width = window.innerwidth;Вышеупомянутые W и H представляют ширину браузера.
Получите ширину браузера, и следующий шаг - нарисовать частицы.
Var opt = {particleMount: 50, // Количество частиц по умолчанию LineColor: RGB (32,245,245), // цвет не DEFAULTRADIUS: 2, // Радиус частицы VARIANTRADIUS: 2, // переменная радиуса частицы: 200 // Минимальное расстояние между частицами};Приведенные выше переменные скорости и RADIUS являются для того, чтобы убедиться, что размер и скорость частиц не совсем одинаковы.
Затем мы создаем класс для инициализации частиц.
Function partical () {this.x = math.random ()*w; .speed = optionspeed + opt.variantspeed*math.random (); Color = opt.particleColor; ), // скорость частицы при x -оси y: this.speed * math.sin (this.directionAngle) // Скорость частиц при y -оси} this.update = function () {// Функция обновления частиц this.border (); момент this.y += this.vector.y; (this.x> = w || this.x <= 0) {// отрицательное число this.vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Если он достигает верхней и нижней границы, сделайте скорость оси y в исходное отрицательное число это Работа за изменение окна браузера в размере размера, и некоторые частицы после размера окна будут скрыты. if (this.x <0) {this.x = 0;} if (this.y <0) {this.yy = 0;} this.draw = function () {// Нарисуйте функцию частиц ctx. startpath ();1. Начальная скорость и угол каждой частицы генерируются случайным образом, и цвет частиц определяется соответствующими параметрами настройки.
2. Это вектор используется для хранения направления движения частиц: если это. Vector.x -1, частицы движутся вправо; Точно так же, если это. Vector.y отрицательный, частицы движутся вверх, и если это положительно, частицы движутся вниз.
Это. Update используется для обновления координат следующей позиции каждой частицы. Во -первых, выполняется обнаружение краев;
3. Увеличение окна может привести к тому, что частицы превышают границу, так что функция обнаружения края не может быть зафиксирована, поэтому необходима серия операторов, чтобы обнаружить эту ситуацию и сбросить положение частиц на границу тока холста.
4. Нарисуйте эти точки на холсте на последнем шаге.
Частицы частиц были написаны, и он нарисует его ниже:
Function init () {getSize ();Приведенная выше инициализация Opt.ParticalAmount имеет объект частицы, который инициализирует объект, но он не нарисован.
Function Loop () {ctx.clearrect (0,0, W, H); Draw ();} window.requestanimationFrame (loop);}Каждый раз, когда выполняется функция Loop (), будет удалено содержание на холсте, а затем координата частиц переселяется через функцию Update () объекта частицы, и частицы протягиваются через функцию Draw () объекта частицы. Ниже приведен эффект в настоящее время:
Однако после размера окна браузера некоторые частицы исчезнут.
Window.addeventListener (resize, function () {winResize ()}, false);Затем вам нужно написать функцию Winresize И более потребляемая производительность. Это рассчитывает размер браузера.
Var particle = [], w, h; Высота, есть введение в}, задержка)} в верхней части статьи
Таким образом, вся анимация частиц завершена, и тогда мы можем нарисовать линию между частицами. Нарисует его между ними.
Итак, как рассчитать расстояние между двумя частицами, вы можете подумать о первом уроке математики младшей школы, теоремы пиротеористов, квадрат и квадрат и квадрат и правый треугольник правого треугольника равны квадрату Третье изменение.
Теперь мы знаем координаты оси x и оси y каждой частицы, затем мы можем рассчитать расстояние между двумя точками, написать функцию и пройти две точки следующим образом:
Функция getDistance (point1, point2) {return math.sqrt (math.pow (point1.x -point2.x, 2) + math.pow (point1.y -point2.y, 2));}Теперь мы можем рассчитать расстояние между двумя точками, поэтому мы рассчитываем расстояние между всеми частицами и всеми другими частицами, чтобы определить, нужно ли им подключиться. Немного это уродливо, поэтому мы можем определить прозрачность соединения в соответствии с расстоянием между двумя частицами. Определенное расстояние не будет отображаться.
Функция LinePoint (point, Hub) {for (let i = 0; i <hub.length; i ++) {let Distance = getDistance (точка, Hub [i]); (if (opacity> 0) {ctx.linewidth = 0,5; ctx.strokestyle = rgba (+line [0]+,+line [1]+,+line [2]+,+opacity+); ctx.beginpath () ; }}}}}}}}Два параметра, передаваемые выше, представляют собой массив одной точки и всю точку зрения, позволяя непрозрачности = 1 -дистанция/опционеру; негативно, и следующие суждения отфильтровали.
var line = option.linecolor.match (// d+/g);
Наконец, расстояние расстояния непрерывно распространяется в функции Loop ().
Function Loop () {ctx.clearrect (0,0, W, H); Нарисуйте ();} for (let i = 0; i <particle.length; i ++) {// Добавить эту циклическую точку линии (частица [i], частица)} window.requestanimationFrame (loop);}Следует отметить, что если вы добавите слишком много точки к/или слишком большому количеству расстояния подключения (расстояние подключения создаст слишком много строк), анимация не будет переносится. Когда порт вида сужается, лучше всего уменьшить скорость движения частиц: меньше размера частиц, а скорость движения в узком пространстве кажется быстрее.
Покажите весь код:
<! 0; Canvas); ), // Цвет частиц LineColor: RGB (32,245,245), // цвет сетки, соединяющей цвет Defaultradius: 2, // Радиус частицы Variantradius: 2, // переменная мышление радиуса частицы: 200 / / / Подключенная провод между минимальным расстоянием частиц}; ; () {GetSize (getSize); i <particle.length; LinePoint (частица [i], particle)} window.requestanimationFrame (loop);} Функция LinePoint (точка, HUB) {for (let i = 0; i <hub.length; i ++) letment = getDistance (точка, Хаб [i]); +line [2]+, непрозрачность+); .closepath (); -Point2.y, 2));} getSize () {w = canvas.width = window.innerwidth; x -ось координата частиц this.y = math.random ()*h; Скорость движения частиц. DirectionAngle = math.floor (math.random ()*360); .Defaultradrad ius+Math. частицы в оси x: this.speed* math. частицы this.Border (); Следующий момент this.y += this.vector.y; Все они достигают границы, если (this.x> = w || this.x <= 0) {// Если вы достигнете левой и правой границы, сделайте скорость превращения оси x в исходное отрицательное число .Vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Если он достигнет верхних и нижних границ, скорость оси y превратится в исходное отрицательное число This.Vector.Y *= -1; , чтобы он мог отобразить это .x = w;} if (this.y> h) {this.y = h;} if (this.x <0) {this.x = 0;} if (this.y <0) {this.y = 0;} this.draw = function () {{{// Функция чертежных частиц ctx.beginpath (); 0, math.pi * 2);Приведенное выше содержимое этой статьи.