Источник: Nuances of Programming
Эта статья будет кратка и проста, чтобы вы могли сразу взять на вооружение эту технику и начать рисовать изумительную пиксельную графику. До знакомства с данной методикой я создавал такую графику при помощи box-shadow и это было мучительно — простое перекопирование значений с последующим их изменением снова и снова.
На случай если вам не знакомо создание пиксельной графики при помощи теней блоков, я вкратце поясню, что это такое. box-shadow — это свойство в CSS, которое прикрепляет одну или несколько теней к элементу. Поэтому, если вы хотите рисовать пиксельные картинки, то просто создаете небольшой блок, а затем определяете великое множество теней, по-разному расположенных вокруг экрана так, чтобы добиться эффекта красивого пиксельного изображения.
Проблема с тенями блоков
Теперь вам должна быть ясна проблема с тенями блоков, заключающаяся в огромном объеме проделываемой работы. Определение каждой box-shadow снова и снова — это действительно нудно! Здесь вы можете подумать: “А зачем вообще заморачиваться и рисовать пиксельную графику из кода, когда существует множество ПО вроде Jhey Tompkin’s pixel?” В ответ я скажу одно лишь слово: “Креативность”. Такие явления, как чистая CSS графика, рисунки с одним элементом div, без элемента div и пиксельная графика не ставят своей целью продуктивность. С их помощью мы проявляем свои личные качества, креативность, воображение, и в течение самого этого процесса вы более глубоко понимаете лежащие в основе принципы.
Ответ кроется в CANVAS
Если с box-shadow приходится слишком много возится — используйте canvas (холст)! Лично я всегда пользуюсь эталонным изображением, и для данной статьи мы поступим также.
Основная идея следующая: мы будем использовать API canvas в JavaScript и определять пиксели, создавая 2D массив, в котором значения этих пикселей будут точно отображаться вдоль каждой строки. Затем заполним сам холст при помощи вложенных циклов for, извлекая значения из массива и подставляя в холст пиксель за пикселем. Это окажется намного быстрее, чем применение теней блоков.
Давайте рассмотрим все шаги.
Шаг 1: настройка холста
Создайте в HTML холст нужного вам размера.
<canvas height="500" width="500" id="board">
</canvas>
Шаг 2: настройка переменных
Нам нужно создать переменные для размера пикселей и для цветов, которые будем применять в графике. Все это мы пропишем в JS-файле:
Шаг 3: определение массива
Теперь нужно заполнить эти значения цветов в массив согласно эталонному изображению. Просто посчитайте необходимое число пикселей по рядам и столбцам, и мы создадим соответственную сетку.
В данном случае нам понадобится сетка 30 на 30 пикселей, поэтому мы определим массив, имеющий 30 значений цветов в столбце, и создадим 30 таких рядов.
Получился действительно немаленький массив, но поверьте мне, если сравнить его со сложностями работы с тенями блоков, то здесь он существенно эффективней.
Шаг 4: заполнение холста
Осталось только закрасить холст, применив вложенные циклы for, и заполнив пиксели цветами из нашего массива.
После позиционирования холста и добавления стилей, законченный рисунок будет выглядеть так:
Вот и все. Теперь вы готовы создавать собственную пиксельную графику и демонстрировать ее миру!
Читайте также:
Перевод статьи Rishav Jadon: Make Pixel art 10x faster ✨?