Пример эффекта плавающего шара на холсте

Недавно я обращал внимание на информацию блокчейна, бродил вокруг и случайно увидел эффект на домашней странице этого веб-сайта. Это куча плавающих шариков. Когда шар приближается, к нему подключается чувствительная линия. Мышь также может создавать сенсорную линию с помощью мяча. Посмотрите: Следующее изображение сделано с использованием холста.

Оригинальный эффект

добиться эффекта

Раньше я много сталкивался с svg и знаю, что с помощью Canvas также можно добиться очень мощных эффектов рендеринга, но никогда не было сценариев использования, которые дали бы мне возможность начать, поэтому на этот раз я планирую попробовать это сам. .

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

См. репозиторий GitHub здесь.

Инструкции по рисованию в Canvas очень похожи на инструкции в SVG и очень просты.

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

BeginPath запускает путь, arc рисует круг и заливает его цветом.

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.stroke();

Аналогично, BeginPath запускает путь, moveTo перемещает кисть в начальную точку, lineTo рисует линию до конечной точки и обводит обводку.

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

 вар холст = document.getElementById(canvas); функция resizeCanvas() { Canvas.width = window.innerWidth; Canvas.height = window.innerHeight;}window.onload = window.onresize = resizeCanvas;

Базовая анимация помогает мне начать.

Четыре шага для создания анимации:

1. Очистите содержимое холста, обычно с помощью методаcleRect().
2. Сохранить состояние холста
3. Рисовать контент
4. Сбросить состояние холста

То, что я сделал, относительно просто, используя только 1 и 3, то есть постоянно очищать холст, а затем перерисовывать его.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, Canvas.width, Canvas.height);}function draw() { cleanCanvas (); // рисуем элементы window.requestAnimationFrame(draw);}

Доступны три:

1. window.setInterval() Если вообще нет необходимости во взаимодействии с пользователем и просто постоянная перерисовка, этого достаточно.
2. window.setTimeout() Если вы хотите, чтобы пользовательские операции, такие как клавиатура и мышь, влияли на анимацию, вы можете использовать это (я не понимаю, не лучше ли requestAnimationFrame?).
3. window.requestAnimationFrame() сообщает браузеру, что делать перед перерисовкой в ​​следующий раз, то есть ваша собственная настраиваемая операция рисования.

Этот пример в MDN довольно крутой. Его можно переместить, а ниже — просто скриншот.

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

Самое основное заключается в том, что Vector представляет точку/вектор в двумерном пространстве, а его членами являются только x и y.

Исходя из этого, Circle представляет круг, центр элемента: вектор представляет центр круга, радиус: число представляет радиус, а скорость: вектор представляет скорость.

Затем просто инкапсулируйте некоторые функции-члены для собственного использования.

TypeScript + Webpack + Webpack-dev-server — это несложно, просто обратитесь к следующему содержимому:

1. Веб-пакет/Начало работы
2. Веб-пакет/Машинописный текст
3. Веб-пакет/devServer
4. веб-пакет-dev-сервер

Кроме того, я также попробовал npx, который используется для запуска исполняемых программ npm. Раньше webpack устанавливался глобально, и вы могли просто вызвать webpack xx напрямую. Если вы устанавливаете webpack локально, вам нужно пройти через ./node_modules/. .bin/webpack Чтобы запустить локальный веб-пакет, теперь вы можете использовать npx webpack xxx.

В конфигурации devServer я добавил hot: true, чтобы включить горячее обновление. В результате на веб-странице появилось сообщение: [HMR] Горячая замена модуля отключена.

Я обнаружил, что это старая ловушка. Когда мне нужно его вызвать, добавьте параметры командной строки: webpack-dev-server --hot --inline.

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