Интерактивный глитч на Canvas с помощью Javascript и PNG картинок

здравствуй дорогой телезритель сети интернет сегодня я расскажу как с помощью java скрипта png файлов немножко любопытствует сделать великолепное рисование интерактивное произведение искусства по эффекту своему схожи с окончанием незабываемой игры пасьянс паук который выходил на windows 95 и 98 xp millennium и 2000 windows vista windows 7 windows 10 и 8 что же хватит болтать давайте на первое что я делаю новую папку на рабочем столе на своей указан один и открываю эту папку в с кони обновление не сегодня создаю новый файл индекс html делаю в нем шаблон базовые стили убоги я убираю марджан и 0 и добавляю новый так называется к нас в конгрессе будет происходить вся наша весь наш интерактив и вся наша графика и я сделаю для канвасов он чтобы его было видно background blue я открываю с помощью расширения лив сервера если у вас нету поставьте вас не можно доработать про него рассказывал в прошлом видео и открыл у меня в другом мониторе вот наш canvas все работает все круто следующий шаг

и так что же такое canvas предоставляет огромные возможности для работы с графикой и с анимацией если увидели какие-то игры скорее всего это тоже canvas мы будем работать с 2d функциями в канзасе и давайте начнем с того что я сделаю java script file и в

нем я выберу мой canvas const конус равен документ квари селектор камаз теперь он у меня сейчас маленький надо его увеличить как его увеличу canvas быть равен ширине окна я умножаю сразу на 2 потому что у меня ретину я хочу чтоб все было четко и класс мы тоже самое делаю с высотой windows in our хайд умножить на 2 но ничего не произошло потому что я не подключил файлы это самая частая ошибка что ты включил файл супер к нас есть только потому что я увеличила теперь появился scroll ее снизу вверх и справа налево и я его сейчас уберу его адские лю с помощью css сто процентов следующим делом мы выбираем и контекст нашего к носа контекст бывает например 3d это reptil но нас сегодня 2d графика поэтому у нас ctx это обычное сокращение для контекста и can get контекст 2 до им не будут содержаться параметры которые нам будут нужны и следующим делом мы с килем все что мы будем рисовать чтобы наречение мы не перелез а у валеры и пересчитывали вручную все действия которые мы будем делать

следующее действие нарисовать картинку на канвасе как это сделать начале нужно определиться какую картинку будем рисовать не так жарко я ненавижу летом работать на ноутбуке а потому что клавиатура греется и руки потеют отвратительно поэтому сейчас найду какой-нибудь png картинку с водичкой то нетривиальный задачи кстати найти картинку так много вот этих всяких ловушек думаешь но это png и jpeg и я добавлю сюда я переименую нам нужно сделать элемент картинки чтоб его добавить на canvas и мышь документ кредит элемент какой элемент картинка в элемента картинки есть атрибут src куда мы укажем название о том. ng осталось его нарисовать я сразу добавлю в and listen or на движении мыши маус снов, функцию как рисовать картинку картинка рисуется с помощью ctx. другие матчи и другой мяч мы указываем картинку которым будем рисовать ее координаты давайте с толстой ее размер появилась картинка но пока ничего не меняется следующий шаг добавить движении мыши в события которое будет происходить каждый раз я могу использовать специальную переменную в которой находится все атрибуты все свойства этого события для этого мне нужно фонд свою передать переменную i went и она будет доступна можно всегда можно посмотреть что эта переменная в себе содержит если открыть консоль и посмотреть что будет происходить данное движение мыши появляется он силен где есть очень много очень много параметров мы будем использовать при джек сэвэйдж y и чаще всего я обычно сокращаю чтобы написать каждый раз я обычно пишу и поэтому это меня будет. ajax будет пиджи григ улет супер бутылке есть небольшой нюанс я хочу чтобы это все было по центру курсора сейчас это непонятно где для этого мне нужно расстояние немного изменить мяча с рисуется на в этой точке да мне нужно от этой точке отнять половину высоты и ширины изображение я изображение в будущем поменяю поэтому я сейчас делаю новую переменную и шейная оно будет равняться ширине изображение мышц и мышц тоже самое с высотой теперь я заменю 330 на ширину она кстати сейчас на нормальное но если я уберу если я поставлю просто их изначальную ширину и высоту то она мне кажется будет слишком большая бутылка да она огромна и поэтому я здесь разделю на примерно 3 мне кажется примерно и будет 300 до а здесь я отниму половину ширины и высоты элитного и минус делить на 2 и теперь у меня бутылка ровно по центру курсора я уже честно перехотел пить поэтому поменяю картинку на что-то более симпатичной а вот например на такое скриншоты так неудобно что нельзя делать это быстро это прям сюда вставлять как было бы круто вот и давайте посмотрим и он огромный вот вы сейчас это удобно что я теперь в одном месте поменяю вот здесь я поменяю допустим на 6 и теперь то есть значением не трогать уже не нужно преимущество в том чтобы сокращать выписывайте переменные прикольно но

можно сделать лучше здесь есть масса нюансов во-первых движения не очень плавные во вторых их очень много и они достаточно неровные мы сделаем то что называется trining нас есть начальная точка допустимо на сто сто есть конечная точка допустим она там где-то внизу вот там не знаю 600 900 мы можем вот это вот расстояние до сделать заполнить его плавно равномерно заполнить этим изображениями начнем с того что я сделаю переменные для текущих значения координат мыши и они пока будут ничему не равняться для x и для игр и для желаемых и я их назову и m& m x и y и я сделаю функцию дроу функция друг будет делать рисование наше изображение функция маус move она будет выполнять обновление наши координат поэтому здесь я пользу коран xix здесь у нас будет car and y в анти snare у меня будет следующее действие во первых mx будет равняться pitch нет. пэйдж x y у меня будет равняться и. и когда только появится у меня в начале загрузится странице cortex будет равен нулю я просто сейчас в поймаю первое событие отважно к равно я просто шрифт порфира код он поддерживает лигатуры для которую когда вот два знака равно они объединяются в такую 11 символ так и вначале у меня то же самое будет карт экстра мясо и нет мне кажется все что будут делать и не совсем так все это все чтобы делать мой мало слов он будет обновлять ее mix in игры кто и желаемое желание положение мыши и вот эту штуку она сработает только один раз тогда загрузить на странице и если сейчас открою там ничего не происходит потому что короне ты спишь здесь неправильно все условия контекст равен нулю korando формат игре должна можете нарисовать мне не вызывается дрого функция это нам бы еще сюда я добавить а так в общем 20 дров помощи карты до района и макса харальд y правильный или по почему не работает там что-нибудь вот почему тут console. log добавился заработала ждет пока картинка загрузить до работает она появляется в каком-то месте где у меня курсор стоит там появляется и пока ничего не происходит потому что у меня функция это не обновляется мне происходит drawn о корректности как один раз и как раз функции draw будет заниматься тем что она будет обновлять значение карен takes care and y как она это будет делать карл x равняется corinth x мы будем увеличивать каждый раз корр индекс на такое значение corinth x плюс скобках будет следующие вычисления а им x минус коран так вот это число на самолет а длина это расстояние между начальным значением и конечно пока получается на самом деле remix car-dex получилась такая штука достаточно плавно и все это дело происходит но можно скоростью это еще уменьшить будет совсем хорошо умножить на 0 1 до тогда уже появляется какая-то плавность очень часто как раз курсор и таким делает образом не даете курсор догоняет твой реальный курсор многих сайтах с тяжелой не maciej это используя принцип он такой и у меня сейчас есть только x но я ещё добавлю y теперь будет происходить везде очень красиво невероятно круто как это еще можно улучшить сейчас у меня функция вызывается каждый раз на движение мышь этих движений мыши просто огромное количество и это не совсем правильно и поэтому я сделаю следующее я уберется дров функцию и я дров у завалю просто так как так у меня будет доступен и только страница загрузится он сразу запустится но она запустить один раз но я сделаю вечный цикл с помощью request анимешный фрейм мне перед нам функции draw репостим между фрейм эта функция которая вызывается каждый раз на отрисовку кадра анимация будет супер плавно и их принципе чаще всего так и делают дальше скандал сам есть крутая штука что можно все taking сохранить во первых она будет на прозрачном слое несмотря на то что мы сделали заливку синим но она будет на прозрачном фоне потому что мы заливку сделали с помощью css если вы хотите сделать заливку с помощью чтобы она была на картинке то для этого нужно задавать фон до нужно просто прямоугольник сделать этот раз где-нибудь в начале например здесь фил style это и будет свет ваши заливки например нужно в осеннем быть синим давайте сделаем серый им будет вот вам теперь серый и в этом случае как раз уже не будет меня синего фона он будет серой и это будет уже хочется непрозрачный поэтому имейте труду и попробуйте это сделать с разными изображениями например с цветами мне нравится больше всего скачал картинку сразу и переименовываю ее очень маленькая мой любимый эффект медив он красота пасьянс паук слова пасьянсы пауку

и осталось самое важное теперь расскажу еще один классный способ как загружать сайты на отлив а я просто мега удобно сами крутой способ как только вы наиграетесь своей новой игрушкой очень красивый открываем на тихой после того как разблокировали telegram если поест его работать гораздо лучше счастья виде к я великий день победы им победы над быстровым смыслом и так ребята самый быстрый способ вы готовы папка с моим проектом я ее просто беру и перетаскиваю вот сюда и все мой сайт в интернете я могу изменить пример название его и назвать и вот он уже есть вообще супер я могу продолжать теперь все свои художественные замыслы в интернете ну класс и что вы выучили к рисование на канвасе с помощью java скрипта это не так сложно winning возможность сглаживание анимации чтобы она была прямо главные сексе и супер быстро диплом на сайт поэтому как только закончите со своими штуками я жду от ваш ваших шедевров жду от вас выкладывайте instagram отмечайте меня я сделаю его repost ребята жду жду ваших ты навык 1 красился до новых а до новых встреч