Популярные эффекты динамического фонового соединения. Приведенный ниже код организован и прокомментирован автором извлеченного кода, который очень подходит для справочного обучения.
Скриншот эффекта:
Демонстрация эффекта: https://jc1144096387.github.io/canvas_nest/
Адрес автора: https://blog.csdn.net/u013556477/article/details/82819785
HTML-код (тестовый код):
<!doctype html><html lang=en> <head> <meta charset=UTF-8> <meta name=Generator content=EditPlus®> <meta name=Авторский контент=> <meta name=Ключевые слова content=> <meta name=Description content=> <title>Эффекты соединения сцены с холстом</title> <style type=text/css>*{ поля: 0px; отступ: 0px; } body {background-color: #f4f4f4; </style></head><body> <!-- <canvas id=c_n9 width=1366 height=403 style=position: top: 0px left: 0px; ; z-index: -1; непрозрачность: 0,5;></canvas> --> <script type=text/javascript src=test-clear.js opacity=0 .6></script></body></html>Javascript-код:
// Немедленное выполнение функции //! используется, чтобы сообщить движку JavaScript, что это выражение функции, а не объявление функции, (),! , +, - и другие операторы могут достичь этого эффекта, но () является самым безопасным // Добавление () после !function(){} приведет к немедленному вызову функции // Это может имитировать частную область видимости. Таким образом, html file не будет вызывать конфликты переменных при ссылке на несколько файлов js! function() { // Связанный с элементом холста // Создайте элемент холста и установите идентификатор элемента холста var Canvas = document.createElement(canvas), context = Canvas .getContext (2d), атрибут = getAttr(); //Устанавливаем связанные атрибуты созданного холста Canvas.id = c_n + attr.length; Canvas.style.cssText = Position:fixed;top:0;left:0;z-index: + attr.z + ;opacity: + attr.opacity; //Добавляем элемент холста в элемент тела document.getElementsByTagName(body)[0].appendChild(canvas); //Эта функция устанавливает атрибут ширины и атрибут высоты элемента холста getWindowWH(); //Событие onresize произойдет при изменении размера окна или фрейма //Здесь при изменении размера окна ширина и высота окна получаются повторно и устанавливают ширину и высоту элемента холста window.onresize = getWindowWH //Эта функция получит элемент сценария, который ссылается на этот файл. //Поскольку функция getScript выполняется один раз во время присваивания в этом файле, когда html-файл ссылается на этот файл, тег сценария после этого файла не интерпретируется браузером. //Итак, в полученном массиве скриптов элемент скрипта, который ссылается на эту статью, находится в конце массива //Цель этой функции — дать разработчикам возможность напрямую изменять атрибуты элемента скрипта, который представляет файл в HTML, чтобы измените некоторые свойства холста, z-индекс холста, прозрачность и количество маленьких квадратов, цвет // Сотрудничайте с предыдущим кодом, чтобы добавить элемент холста к элементу тела, когда разработчик захочет его использовать. этот специальный эффект в качестве фона, ему нужно только добавить элемент сценария в html-файл и просто процитировать этот файл function getAttr() { let scripts = document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v — последний элемент сценария, который ссылается на элемент сценария этого документа return { length: len, z: script. getAttribute (zIndex) || -1, непрозрачность: script.getAttribute(opacity) || 0,5, цвет: script.getAttribute(color) || script.getAttribute(count) || 99 } } //Получаем ширину и высоту окна и устанавливаем ширину и высоту элемента холста function getWindowWH() { W = Canvas.width = window.innerWidth || document.documentElement.clientWidth | | document.body .clientWidth, H = Canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } //Генерируем маленькие квадраты в случайных позициях var random = Math.random, Squares = [] //Сохраняем маленькие квадраты //Помещаем маленькие квадраты в массив Squares[] for (let p = 0; p < attr.count; p++; ) { var Square_x = Случайный() * W, //абсцисса Square_y = Случайный() * H, //ордината Square_xa = 2 * Случайный() - 1, //Смещение по оси X-1,1 Square_ya = 2 * Случайный () - 1; // Смещение по оси Y Squares.push({ x: Square_x, y: Square_y, xa: Square_xa, ya: Square_ya, Max: 6000 }) } // Создаем небольшой квадрат мыши var mouse = { x: null, y: null, max: 20000 } //Получаем координаты мыши window.onmousemove = function(i) { //i — W3C DOM, window.event Для IE DOM для достижения совместимости с IE //Однако IE в настоящее время поддерживает W3C DOM. Я также могу добиться эффектов взаимодействия с мышью, закомментировав следующую строку кода. //В Интернете сказано, что. 7/8/9 не поддерживается Да, я не проверял //Конечно, правильно добавить i = i || window.event; mouse.x = i.clientY; ; } //После того, как мышь выйдет из окна, убираем ее Маленький квадрат window.onmouseout = function() { mouse.x = null; mouse.y = null } //Рисуем маленький квадрат, маленький квадрат перемещается (обратное движение при касании границы), маленький квадрат привязан к var анимации = window; .requestAnimationFrame || окно .webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(i) { window.setTimeout(i, 1000 / 45) }; // RequestAnimationFrame, поддерживаемый каждым браузером, различен и совместим с каждым браузером function draw() { // Очистка холста context.clearRect(0, 0, W, H); ].concat (squares); //Соединяем (объединяем) небольшой квадратный массив мыши и другие маленькие квадратные массивы var x, v, A, B, z, y // таблица атрибутов квадрата: x, y, xa, ya, Макс Squares.forEach(function(i) { //Реализуем направленное движение маленьких квадратиков ix += i.xa; iy += i.ya; //Управляем направлением движения маленьких квадратиков//Когда маленький квадратик достигает окна границу, двигаться в противоположном направлении i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1 i.ya = i.ya * (iy > H || iy < 0 ? -); 1:1); //Первые два параметра fillRect — это координаты x, y верхнего левого угла прямоугольника, а последние два — ширина и высота соответственно //Рисуем небольшой квадрат context.fillRect(ix — 0.5, iy — 0.5 , 1, 1); //Обход всех элементов в w for (let n = 0; n < w.length; n++) { x = w[n]; //Если x и i не являются одним и тем же экземпляром объекта и координаты xy точки x существуют, если (i !== x && null !== xx && null !== xy) { x_diff = ix - xx; //Разница между координатами x i и x y_diff = iy - xy; //Разница между координатами y i и расстоянием x = x_diff * x_diff + y_diff * y_diff; //Квадрат гипотенузы if (distance < x.max) { //Сделаем маленький квадрат i связанным маленьким квадратом мыши, то есть, если расстояние между маленьким квадратом i и маленьким квадратом мыши слишком велико, маленький квадрат i будет связан маленьким квадратом мыши, // в результате чего получается несколько маленьких квадратов с мышью в центре, mouse.max /2 — это радиус круга if (x === mouse && distance > x.max / 2) { ix = ix - 0,03 * x_diff; iy = iy - 0,03 * y_diff } A = (x.max - distance) / x.max; context.beginPath(); //Установите толщину линии кисти в зависимости от расстояния между двумя маленькими квадратами в диапазоне 0-0,5. чем тоньше линия, достигая максимума. Линия исчезает при рисовании линии context.lineWidth = A / 2 //Установите цвет линии кисти sc, который соответствует цвету холста, и прозрачность (A+0.2); , то есть чем дальше находятся два маленьких квадрата, тем светлее линия context.strokeStyle = rgba ( +. attr.color + , + (A + 0.2) + ); //Устанавливаем мазок кисти на маленький квадратик i context.moveTo(ix, iy //Перемещаем мазок кисти на маленький квадратик x context.lineTo(xx); , xy); //Завершаем рисование линии, то есть рисуем линию, соединяющую квадратики context.stroke(); //Удаляем маленький квадрат i из массива w //Предотвращаем повторное соединение двух маленьких квадратов w.splice(w.indexOf(i), }); //window.requestAnimationFrame аналогичен setTimeout, формируя рекурсивный вызов , //Однако window.requestAnimationFrame использует системный временной интервал для обеспечения максимальной эффективности отрисовки и обеспечивает лучшую оптимизацию, чтобы сделать анимацию более плавной//После оптимизации браузера анимация становится более плавной; //Когда окно не активировано, анимация остановится для экономии вычислительных ресурсов;animation(draw); //Здесь, подождав 0,1 секунды, выполните draw() один раз. Настоящий эффект анимации — setTimeout(реализуется окном. .requestAnimationFrame function() {draw() }, 100)} ();Адрес исходного кода: https://github.com/jc1144096387/canvas_nest.
Подвести итогВыше приведен код для анализа холста html5 для достижения динамических эффектов фонового подключения мыши, введенных редактором. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. . Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!