Как сделать прозрачный фон? Создание игр на JavaScript, альфа канал и маска цвета

Автор Maksim Inshakov
Как сделать прозрачный фон? Создание игр на JavaScript, альфа канал и маска цвета

Итак.

Я залью — это дело другим цветом всем. Привет народ. Меня зовут сканер и как-то раз я говорила о том, что могу подсказать.

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

И так здесь у нас про который. Я залью, но например и так. Допустим у нас есть такой вот изображение на вот таком вот фоне замечательно если я вот круто мы с вами увидим такой вот картину вопрос в том как сделать этот. Зелёный фон прозрачным. И на самом деле ответ достаточно простой. Давайте первоначально базовый набор всего того, что нам может потребоваться для работы и так я создам здесь canvas который будет у нас размером 200 на 200 теперь. Наша задача подгрузить изображение вот — это вот давайте в принципе реализуем — это самое простейшим самым простейшим способом кубок. п теперь между этими двумя событиями точнее командами нам нужно обозначить обработчик и так и MG Oh God и — это у нас будет функция которая будет являться самим обработчиком и. Давайте здесь в-лог выведем console.log завести посмотрим, что же — это у нас такое. И как вы можете видеть — это у нас картинка. Самая обыкновенная теперь, что мы можем сделать мы можем обратиться к нашему контекста и вызвать метод Draw Image который первым делом у нас примет то есть саму картинку после чего примет координаты например 2020 и посмотрим. Ну вот наш canvas при спокойненько отобразил наш кубок. Однако фон у него нет хотелось бы потому, что ну вот нужно нам фон сделать прозрачным нашем же случае он зелёный. О'кей комментируя эту команду она нам пригодится, но несколько, что я хочу сделать сейчас смотрите обработка этих изображений всех внешних. У нас возможно только после загрузки поэтому вам будут помещаем — это действие обязательно следующий факт который нужно тоже учитывать чтобы сделать фон прозрачным нужно пройтись по пикселям этого изображения мы не можем пройтись по пикселям изображение объектом именно mg. как такое MG на нужно создать canvas поэтому создаём внутри ещё один canvas и так конверт и в принципе можно писать теми же самыми названиями, но потом нам нужно будет обратиться. Поэтому я здесь закажу два то есть два который как будто бы внутри и так. Делаем всё тоже самое документ клеит или только здесь я уже пишу canvas ширина смотрите ширина нашего канваса нам нужно указать такой же как у изображение поэтому тут пишем аналогичное действие делаем их для высоты то есть задаем нашему canvas в ширину и высоту теперь он примет у нас ширину и высоту того изображение которое мы. Это временный canvas. Я так хорошо мы его создали. Давай ты здесь также создадим ещё и внутренний контекст контекст вам так у нас будет брать колёса 2 команды точно тоже самое детка текст здесь 2D хорошо мы взяли 2 canvas. А, что мы теперь хотим сделать. Ну самое главное, что с чего мы всё начнём — это текст 2 Draw Image и здесь указываем 000 рисовали изображение на нашем втором внутренним канвасе замечательно теперь здесь контекст и мы можем написать. КНВ только нужно выбрать 2 вот таким вот образом и, что мы здесь видим. Мы увидим кусочек от нашего исходного изображения потому, что нам нужно было здесь указать второй канал. Всё мы в принципе визуально видим тоже самое. Однако теперь после вот этих вот действий. Нам необходимо пройтись по пикселям нашего канваса и в принципе всё то есть пройтись по пикселям сделать их прозрачные при условии, что они равняются какому-то свету для начала. Давайте возьмём сам цвет. То есть я снова перейду редактор откроют одела и пипеткой возьму цвет который у нас тут сейчас есть и можем посмотреть красный 0 зелёный 255 синий ноль альфа-канал непрозрачный запомните вот эти вот параметры они у нас являются параметрами пикселя то есть красный зелёный синий и альфа-канал всё в диапазоне от 0 до 255 всё то, что в движке прозрачностью создается от нуля до единицы всё в итоге конвертируется в ответе обозначение хорошо запомнили для себя. Если, что обратимся к этому упражнение теперь. Наша задача получить массив пикселей то есть получить тот самый массив проходящих по которому мы будем получать данные о. Пикси и при необходимости их изменять для получения этого массива есть специальная команда то есть создадим здесь ещё один объект внутри на старый Pixel то есть массив писали. Обращаемся к нашему к тексту два ко второму его методу Get Image Data сюда нам нужно передать 4 аргумента то есть. Первое — это начало считывания вторые два — это окончание с читами то есть грубо говоря прямоугольник пикселей. Ну Нам же нужно сделать прозрачным по всему изображение поэтому от 0 до и теперь указываем опять же хотеть можно указывать уже неизвестно например canvas 2. Vitz и canvas 2. и посмотреть. Если у нас какие-нибудь ошибки. Так у нас появилась ошибка. Да она у вас тоже может появиться. Если вы работаете в. Хроме я в том, что протокол за нашего документы — это файл вот он. Мы же берём с вами изображение сейчас прямо программно то есть берём массив пикселей и у нас не проходит — это всё дело по опасности для того чтобы — это исправить вот я себе сюда на рабочий стол уже добавил соответствующие ярлык в Ubuntu в Linux. Ах Везде где вы можете запускать через командную строку просто chromium-browser нужно. Дописать такой вот.

0 комментариев
0

Читайте также