Несколько дней назад я использовал стиль CSS и JS, чтобы отдать должное аналогичному интерфейсу Github404. GitHub404 через холст.
Визуализации
Файл каталог Подать ресурсыИсходный код файла и изображение приведены в конце статьи
КодТело веб -страницы
Вот четко определенный и высокий элемент для холста. Эти теги IMG загружаются из этих изображений, и нам не нужно загружать их в JS, а затем устанавливать изображение для отображения: нет.
<Body> <canvas id = mycanvas width = 1680 высота = 630 стиль = маржа: 0; None> <img src =./Images/text.png style = display: none> <img src =./Images/cat.png style = display: none> <img src =./Cat_shadow.png sty : None> <img src =./Images/speeder.png style = display: none> <img src =./Images/speeder_shadow.png style = display: none> <img src =./Images/bu liding_1.png style = Дисплей: none> <img src =./Images/building_2.png style = display: none> </body>JS Part
1. Здесь я все еще построил новый объект JSON под названием GitHub404, чтобы инкапсулировать все параметры и методы
2. Создайте объект Imgdata, а затем используйте параметры, необходимые для всех IMG, в PS: вверху и слева для позиционирования, когда метод DraitImage (). мышиное движение.
3. Метод TheInit () используется для инициализации, который является интерфейсом с внешним интерфейсом
4. Реализация метода рисования состоит в том, чтобы пройти через Imgdata [] в цикле в циклах, а затем назначить значение по очереди. Обратите внимание на использование метода ctx.clearrect () для очистки холста первой пустой пустой сущности
<Script> vargitHub404 = {imgdata: {// Записывает информацию всех изображений в объектах JSON BG: {Top: 0, слева: 110, // сверху и левша для позиционирования. Шкала пути изображения: 0,06, // Когда мышь перемещается, доля соответствующего движения изображения}, здание_2: {top: 133, слева: 1182, src: './images/building_2 .png', Scale: 0.05 ,}, Building_1: {top: 79, слева: 884, src: './images/buliding_1.png', масштаб: 0,03,}, speer_shadow: {top: 261, слева: 776666666 ,, src: './images /sspeeder_shadow.png ', Scale: 0.01,}, cat_shadow: {top: 288, слева: 667, src:' ./image_shadow.png ', Scale: 0.02,}, Spe Eder: {Top: 146, слева: 777 , src: './images/speeder.png', Scale: 0.01,}, Cat: {top: 88, слева: 656, src: './images/cale.png', Scale: 0,05,}, текст: {Top: 70, слева: 364, src: './images/text.png', Scale: 0.03,}, rate_w: 0, rate_h: 0, // смещение смещения Field_width: 1680, Field_heigh: 370, // Фоновая высота и ширина Canvas: document.Queeryselector ('#mycanvas'), // Получить элемент Canvas init: function () {// инициализированный метод загрузки this.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se.se () {// инициализированный метод загрузки this.se.se.se.se.se.se.se. .SE.SE.SE.SE.SE.SE.SE TRATEWH (); Document.client ширина; Ctx = this.canvas.getcon ('2d'); ] .let; }, AttachMouseEvent: function () {var the = this;时重新画图的方法 Пусть ctx = this.canvas.getContext ('2d'); Image = new Image (); Верхний параметр при рисунке ниже , Image.width, image.height);}}} window.onload = function () {// Просто вызовите метод init github404, чтобы инкапсулировать данные github404.init ();} </script> СуммироватьНа этот раз, используя холст для завершения этого динамического эффекта, я узнал больше об использовании холста. Сделай меня в то же время
Существует более глубокое понимание того, как организовать код для упаковочных данных и методов с объектом JSON.
Приведенное выше содержимое этой статьи.