Пример использования холста для достижения красивого эффекта дождя

В этой статье рассказывается о том, как использовать холст для создания красивого эффекта дождя. Давайте сначала посмотрим на конечный эффект.

визуализации

Посмотрите на картинку, чтобы проанализировать, каких эффектов нам нужно добиться.

1. Эффект падения капли дождя: перемещайте мышь, чтобы контролировать направление падения.

2. Капли дождя падают и разбиваются на мелкие капли воды. Направление движения маленьких капель воды такое же, как направление движения мыши.

3. Капли дождя попадают в определенный диапазон координат мыши и разбиваются на мелкие капли воды. Аналогично, направление движения маленьких капель воды такое же, как направление движения мыши.

Хорошо, давайте грубо разделим весь эффект на три эффекта и добьемся этих трех эффектов, и все готово.

Давайте сделаем это шаг за шагом.

Идея достижения полного эффекта заключается в том,

Используйте массив для сохранения объектов капель дождя.

Объект капли дождя имеет различные атрибуты, используемые для представления координаты капли дождя, координаты Y, длины, скорости падения, цвета и флага, позволяющего определить, следует ли ее удалить.

Добавьте в массив определенное количество объектов капли дождя, затем пройдите по массиву, измените координаты X и Y каждого объекта капли дождя и с помощью холста нарисуйте две точки на основе координат объекта капли дождя, которые вместе образуют капля дождя.

Так что ключом к достижению эффекта являются координаты

Координата X капли дождя: случайное число.

Координата капли дождя: -100, это позволяет каплям дождя попадать из-за пределов видимой области.

Координата X капли дождя:原x坐标的值+ speed * speedx

скорость — фиксированная величина, обозначающая скорость падения капель дождя,

Speedx — переменная, связанная с направлением движения мыши, speedx = speedx + (maxspeedx - speedx) / 50

А maxspeedx — это значение, полученное в зависимости от направления движения мыши.

maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2) ,

e.clientX: значение расстояния мыши слева от видимой области.

CanvasEl.clientWidth: ширина всей визуальной области.

Другими словами, скоростьx — это значение, постепенно приближающееся к maxspeedx.

Диапазон значений maxspeedx составляет от -1 до 1. Чем ближе его значение к -1, тем дальше влево. Чем ближе значение к 1, тем дальше вправо.

Почему бы просто не использовать maxspeedx?

Это сделано для того, чтобы капли дождя не меняли направление так быстро. Вместо изменения направления сразу после смены мыши должна быть небольшая задержка, чтобы оно выглядело лучше.

Если использовать maxspeedx, эффект такой

Если использовать SpeedX, эффект такой

Координата y капли дождя:原y坐标的值+ speed

Скорость такая же, как указано выше в координате x. Это фиксированное значение, которое представляет скорость падения капель дождя.

Хорошо, наконец, я использую холст, чтобы нарисовать две точки в соответствии с координатами объекта капли дождя, а затем соединяю их, и капля дождя рисуется.

Координата первой точки относительно проста. Непосредственно получите координату x и координату y объекта капли дождя, которая является координатой этой точки.

Координаты второй точки:

x坐标= 雨滴x坐标的值+ 雨滴长度* speedx

y坐标= 雨滴y坐标的值+ 雨滴长度

Наконец, соедините эти две точки, и получится линия, представляющая собой каплю дождя.

При установке координаты x снова используется переменная скоростьx. Это делается для того, чтобы направление капли дождя и направление падения капли были одинаковыми.

Когда SpeedX не используется, это выглядит так

При использовании SpeedX такое бывает

Идея здесь на самом деле чем-то похожа на эффект, описанный выше.

Используйте массив для сохранения небольших объектов с каплями воды.

Маленькая капля воды на самом деле представляет собой дугу окружности.

Небольшой объект капли воды имеет различные атрибуты, используемые для представления координат небольшой капли воды, скорости движения по оси X, скорости движения по оси Y, радиуса круга и флага, определяющего, следует ли его удалить.

Добавьте в массив определенное количество небольших объектов с каплями воды, затем пройдите по массиву, измените координаты x и координаты y каждого небольшого объекта с каплями воды и используйте холст, чтобы нарисовать дугу на основе атрибутов координат и атрибутов радиуса маленького объекта. объект капля воды.

Поэтому фокус достижения эффекта по-прежнему находится в координатах

Маленькие капли воды появляются, когда капля дождя исчезает, поэтому координаты маленькой капли воды также основаны на координатах капли дождя. Когда вы удаляете каплю дождя, появляются несколько маленьких капель воды, и направление движения маленькой капли воды равно. а также направление падения капли дождя. Мышь. Направление движения такое же, поэтому упомянутая выше переменная скоростьx все равно понадобится.

小水珠x坐标： 删除的雨滴x坐标+ 删除的雨滴长度* speedx

小水珠y坐标：删除的雨滴y坐标+ 删除的雨滴长度

Здесь нам нужно использовать два атрибута объекта маленькой капли воды vx (скорость изменения значения оси x) и vy (скорость изменения значения оси y).

Координата X маленькой капли воды

vx = vx + speedx / 2

小水珠的x坐标=原x坐标+ vx ,

Speedx: переменная, связанная с направлением движения мыши, упомянутым выше. Функция здесь заключается в управлении направлением движения маленьких капель воды в том же направлении, что и в других направлениях.

speedx / 2 цель деления на 2 — сделать расстояние перемещения маленьких капель воды по оси X короче и выглядеть более реалистично.

Координата Y маленькой капли воды

vy = vy + gravity

小水珠的y坐标= 原y坐标+ vy;

vy: отрицательное число

Гравитация: Гравитация, положительное число, установленное на 0,5 в полном коде.

Поскольку исходная координата y является положительным числом, значение координаты y маленькой капли воды сначала будет уменьшаться, а затем увеличиваться. Это необходимо для достижения эффекта, при котором маленькая капля воды сначала поднимется, а затем упадет. См. рисунок.

Наконец, просто используйте холст, чтобы нарисовать дугу на основе атрибутов координат и атрибутов радиуса маленькой капли воды. Дуга является случайной.

3. Капли дождя попадают в определенный диапазон координат мыши и разбиваются на мелкие капли воды. Аналогично, направление движения маленьких капель воды такое же, как направление движения мыши.

Размер круга на картинке определить легко. Предположим, что радиус круга равен 35. Мы можем получить координаты мыши, приняв координаты мыши за центр круга, а 35 за радиус. , мы можем определить размер круга.

Ключевой момент заключается в том, как определить, попали ли капли дождя в этот диапазон. Для этого необходимо использовать теорему Пифагора. Посмотрите на картинку.

Поскольку капля дождя — это линия, соединяющая две точки. Чтобы увидеть, вошла ли капля дождя в этот диапазон, вам нужно посмотреть на координаты точки под каплей дождя. Какое расстояние по прямой от мыши — это длина отрезка линии. АБ на картинке.

Теорема Пифагора: Сумма квадратов двух прямоугольных сторон прямоугольного треугольника равна квадрату гипотенузы.

AB = Math.sqrt(BC BC + AC AC)

BC = координата x капли дождя - координата x мыши

AC = координата y капли дождя - координата y мыши

Метод Math.sqrt() используется для вычисления квадратного корня числа.

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

Если это в пределах досягаемости, удалите капли дождя и нарисуйте несколько небольших капель воды.

Подвести итог

Чтобы добиться этого эффекта, проблема заключается в направлении капель дождя, направлении падения капель дождя и направлении движения маленьких капель воды. Все это связано с направлением движения мыши. используйте холст, чтобы непрерывно рисовать линии в зависимости от расстояния. Подойдет дуга.

Полный код

 <!doctype html><html lang=en><head> <meta charset=UTF-8> <style> * { поля: 0; дополнение: 0; </style></head><body> <canvas id =canvas style=position: Absolute; height: 100%; width:100%;></canvas> <script> window.onload = main; function main() { // Получаем элемент холста var CanvasEl = document.getElementById('canvas'); var ctx = CanvasEl.getContext('2d'); // Цвет фона холста var backgroundColor = '#000'; // Ширина холста равна размеру холста. ширина визуальной области CanvasEl.width = CanvasEl.clientWidth // Высота холста равна высоте видимой области CanvasEl.height = CanvasEl.clientHeight // Массив для сохранения мелких капель воды // После того, как капли дождя падают, они разбиваются на маленькие капли воды. затем падают, в основном из-за силы тяжести. Из-за переменных var Gravity = 0.5 // Сохраняем массив капель дождя // Каждая капля дождя представляет собой нарисованную линию var linelist = [] // Сохраняем координаты мыши // mousePos[0); ] Представляет значение оси X, mousePos[1] представляет значение оси Y var mousePos = [0, 0] // Следуя за мышью, капли дождя в области размера mouseDis исчезнут, образуя эффект рассеяния; // Если mousePos находится в центре круга, mouseDis — это Radius, капли дождя в этом диапазоне будут растекаться и образовывать множество мелких капель воды var mouseDis = 35 // Обновить анимацию один раз и нарисовать капли дождя lineNum. Чем больше значение lineNum. , тем плотнее будет дождь var. lineNum = 3; // Следуйте направлению мыши, чтобы изменить направление дождя // После перемещения мыши направление дождя будет медленно меняться, в основном в зависимости от переменной скоростиx var Speedx = 0 // maxspeedx — максимальная скорость; значение, которое может принимать скоростьx // Когда скоростьx = maxspeedx, направление дождя сразу же изменится вместе с направлением движения мыши var maxspeedx = 0 // При изменении размера страницы сбросим размер холста window.onresize = function () {; холстЭл.ширина = CanvasEl.clientWidth; CanvasEl.height = CanvasEl.clientHeight; } //Перемещайте мышь, чтобы вызвать событие window.onmousemove = function (e) { //Устанавливаем mousePos, равный координатам мыши // e.clientX — расстояние до слева от видимой области окна браузера Distance // e.clientY — расстояние от верха видимой области окна браузера mousePos[0] = e.mousePos[1] =; e.clientY; // Установите значение maxspeedx посредством положения мыши, диапазон значений от -1 до 1 // Значение maxspeedx связано с // 1. Направление капли дождя // 2. Направление капли дождя. падение капли дождя // 3. Скорость, с которой направление падения капель дождя меняется в зависимости от направления движения мыши // 4. Направление движения мелких капель воды // Чем ближе значение к 1, тем направление дальше вправо // Чем ближе значение к -1, тем направление левее maxspeedx = (e.clientX - CanvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2 } // В соответствии с параметрами возвращаем цвет RGB, используемый для установки цвета капель дождя function getRgb(r, g, b) {); return rgb( + r + , + g + , + b + } // Рисуем каплю дождя (линию) function createLine(e) { // Генерируем случайным образом длину капли дождя var temp = 0,25 * (50 + Math.random() * 100); // Линейный объект, представляющий каплю дождя var line = { // Скорость падения капли дождя: 5,5 * (Math.random() * 6 + 3), / / Определить, следует ли удалять, если значение истинно, удалить его die: false, // Координата X капли дождя posx: e, // Координата y капли дождя posi: -50, // Длина капли дождя h: temp, // Цвет капель дождя color: getRgb(Math.floor(temp * 255/75), Math.floor(temp * 255/75), Math.floor(temp * 255/75)) }; // Создаем товар объект линии (капли дождя), добавленный в массив, содержащий капли дождя linelist.push(line } //); Нарисуйте небольшую каплю воды (небольшие капли воды после того, как капли дождя рассеются, представляют собой дуги) function createDrop(x, y) { // Объект капли, представляющий дугу var drop = { // Определяем, следует ли удалять, value Если true, удалить die: false, // Координата x центра дуги posx: x, // Координата y центра дуги posi: y, // vx представляет скорость, с которой изменяется значение оси x vx: (Math.random ( ) - 0.5) * 8, // vy представляет скорость изменения значения оси Y. Диапазон значений: от -3 до -9 vy: Math.random() * (-6) - 3, // The. радиус дуги radius: Math.random() * 1.5 + 1 }; // Рисуем определенное количество маленьких капель воды function madedrops(x, y) { // Случайно генерируем число maxi // maxi Представляет количество небольших капель воды, которые необходимо нарисовать var maxi = Math.floor(Math.random() * 5 + 5); for (var i = 0; i < maxi; i++) { dropList.push(createDrop(x, y) } } // Начинаем вызывать функцию обновления для обновления анимации window.requestAnimationFrame(update); // Обновляем функцию анимации update() { // Если массив, содержащий маленькие капли воды, имеет содержимое if (dropList.length > 0) { // Обход массива, содержащего небольшие капли воды dropList.forEach(function (e) { //Установка e.vx, vx представляет скорость изменения координаты x // (speedx)/2 равна for: Сделайте расстояние перемещения маленьких капель воды по оси X короче и они будут выглядеть более реалистично // Также сделайте направление движения маленьких капель воды таким же, как направление капель дождя, направление падения капель дождя и направление движения мыши e.vx = e.vx + (speedx / 2); e.posx = e.posx + e.vx; //Установите e.vy, vy представляет скорость изменения координаты y // Диапазон e.vy составляет от -3 до -9, и в это время e.posy (координата y) должна быть положительным значением, поэтому значение e.posy сначала уменьшится, а затем увеличится // то есть капли дождя разойдутся на мелкие капли воды, и маленькие капли воды сначала поднимутся, а затем падение e.vy = e.vy + гравитация; + e.vy; // Если координата y маленькой капли воды больше, чем высота видимой области, установите для атрибута die значение true // Если маленькая капля воды превышает видимую область, удалите ее, если (e. posi > CanvasEl.clientHeight) { e .die = true; } } } // Удалить элемент массива, атрибут die которого имеет значение true // Удалить маленькие капли воды за пределами видимой области for (var i = dropList.length - 1). ; я >= 0; я- -) { если (dropList[i].die) { dropList.splice(i, 1 } } // Устанавливаем скорость изменения направления дождя, диапазон значений: от -1 до 1 // Когда скоростьx = maxspeedx, направление дождя будет изменяться скоростьx сразу при движении мыши направление = скоростьx + (maxspeedx - скоростьx) / 50 // Нарисуйте определенное количество капель дождя на основе значения lineNum for (var i = 0; i < lineNum; i++) { // Вызовите функцию createLine, параметром является координата X капли дождя createLine(Math.random() * 2 * CanvasEl.width - (0.5 * CanvasEl.width) } // Устанавливаем конечную линию, то есть конечную линию. капли дождя растекаются, образуя множество мелких капель воды. Position var endLine = CanvasEl.clientHeight - Math.random() * CanvasEl.clientHeight / 5 // Обходим массив, содержащий капли дождя linelist.forEach(function (e) { // Используйте теорему Пифагора, чтобы определить диапазон, в котором капли дождя будут растекаться, образуя маленькие капли воды // e.posx + Speedx * eh — координата x дождевая капля/ / e.posy + eh — это координата y капли дождя var dis = Math.sqrt(((e.posx + Speedx * eh) - mousePos[0]) * ((e.posx + Speedx * eh) - mousePos[0]) + (e.posi + eh - mousePos[1]) * (e.posi + eh - mousePos[1])); // Если она находится в области mouseDis, удаляем каплю дождя и нарисуйте несколько маленьких капель воды (дуги) // Реализуйте эффект прикосновения мыши к каплям дождя и разлетающихся капель на маленькие капли воды if (dis < mouseDis) { // Удаляем капли e.die = true; несколько маленьких капель воды (дуга окружности) madedrops(e.posx + Speedx * eh, e.posi + eh } // Если капли дождя превышают конечную линию, удаляем капли и рисуем несколько небольших капель воды (дуги) if ((e.posi + eh) > endLine) { e.die = true; madedrops(e.posx +speedx * eh, e.posy + eh } // Если координата y капли дождя больше высоты видимой области, установите кубик атрибут true // Если капля дождя превышает видимую область, удалите ее if (e.posy >= CanvasEl.clientHeight) { e.die = true } else { // Постепенно увеличивайте значение координаты y капли дождя e.posy = e. posi + e.speed ; // Изменяем координату x капли дождя // * скоростьx используется для управления направлением падения капли // Сделайте направление падения капли таким же, как направление движения мыши e.posx = e .posx + e.speed *speedx } }); // Удалить элементы массива, у которых атрибут die имеет значение true // Удалить капли дождя в области мыши, за конечной линией и за пределами видимой области for (var i = linelist.length - 1; i >= 0; i--) { if (linelist[i].die) { linelist.splice(i, 1); } // Рендеринг render() // Рекурсивный вызов update для достижения эффекта анимации window.requestAnimationFrame(update); // Функция рендеринга render() { // Нарисуйте прямоугольник размером с видимую область ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, CanvasEl.width, CanvasEl.height); // Нарисуйте эффект капли дождя ctx. lineWidth = 5; linelist.forEach(function (line) { ctx.strokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); // * Speedx используется для управления направлением капель дождя // Сделайте направление капель таким же, как направление движения мыши ctx.lineTo(line.posx + line. h *speedx, line.posi + line.h); ctx.stroke(); }); // Рисуем капли дождя, образующие маленькие капли воды. ctx.strokeStyle = #fff; dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.stroke(); }); // Раскомментируйте, и вы увидите диапазон мыши/* ctx.beginPath(); ctx.arc(mousePos[0], mousePos[1], mouseDis, 0, 2 * Math.PI() */ } } </script></body></html>;

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