Предыдущие части: Графический контекст, Расстановка объектов, Инициализация, Функции и библиотеки, Проектирование
В пятой части я уделил внимание тому, как получить графический контекст для рисования. В разных языках это происходит по-разному, но мне удалось всё свести к единому знаменателю и получить и в Питоне, и в Javascript переменную ctx, которая и является моим графическим контекстом.
С помощью этого графического контекста я хотел бы нарисовать самый простой примитив – закрашенный цветной прямоугольник.
И опять я не могу начать рисовать, потому что нужно задать цвет для рисования, а это требует отвлечься на объяснения.
Что нужно, чтобы задать цвет в JavaScript:
ctx.fillStyle = 'black';
Атрибут fillStyle контекста рисования задает цвет, которым нужно красить. (Атрибут – это не функция, он не вызывается, а просто присваивается, как обычная переменная.)
Надо помнить, что сам контекст нам выдан из HTML, поэтому цвет задается в одном из форматов, принятых в HTML и CSS. Это может быть просто название цвета, например 'black' (черный), или его шестнадцатеричное RGB-представление '# 000000', или функция 'rgb(0,0,0)'. Я выберу формат 'rgb(0,0,0)', потому что в Питоне используется аналогичный подход. RGB это значит Red, Green, Blue, то есть красный, зеленый, синий. Это три компонента, из которых можно получить любой цвет. Они изменяются от 0 до 255. Например, (0,0,0) это черный цвет, так как все компоненты равны нулю, (255,255,255) это белый цвет, так как все компоненты на максимуме, (255,0,0) это чисто красный цвет, (0,255,0) это чисто зеленый цвет, (0,0,255) это чисто синий цвет, (255,255,0) это желтый цвет (красный + зеленый), (255,0,255) это сиреневый (красный + синий) и т.д.
Получить более замысловатые цвета будет проблематично, потому что вряд ли вы сможете угадать на глаз, какие интенсивности RGB они имеют. В этом случае нужно просто открыть какой-нибудь графический редактор, ткнуть пипеткой в интересующий цвет, и посмотреть его значения RGB.
А что там у Питона?
color = (0,0,0)
Здесь мы просто присвоим цвет своей переменной, в контекст лезть не нужно. (0,0,0) это те же самые RGB. Запись в круглых скобках – это в Питоне разновидность массива-константы, будем называть это просто коллекцией.
Наконец-то можно нарисовать квадрат!
Пример из JavaScript:
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(100, 100, 50, 50);
Функция fillRect рисует черный квадрат, который находится по координатам x=100, y=100 и имеет ширину 50 и высоту 50 (всё в пикселах)
Обратите внимание, что координаты 100, 100 – это координаты внутри холста, а сам холст может располагаться в любом месте экрана, потому что находится внутри HTML-страницы в браузере.
Также обратите внимание, что аргументу fillStyle мы присваиваем не значение функции rgb(0,0,0) как таковой, а просто строку – она написана в кавычках. Это просто строка, состоящая из символов, а не функция. С тем, что внутри строки, разберется сам контекст, это информация для него.
Пример из Python:
color = (0,0,0)
rect = pygame.Rect(100, 100, 50, 50)
ctx.fill(color, rect)
Тут ждет ещё один сюрприз. Чтобы нарисовать прямоугольник с помощью библиотеки pygame, требуется сначала создать в памяти структуру данных, описывающую прямоугольник. Для этого нужно вызвать функцию библиотеки pygame.Rect() и передать в нее параметры прямоугольника: координаты x, y, ширину и высоту. Функция создаст структуру и вернет её нам, после чего мы присвоим её переменной rect.
Теперь мы вызываем функцию контекста рисования ctx.fill() и сообщаем ей следующее:
"Возьми цвет color и закрась им область холста, которая совпадает с прямоугольником rect".
Немножко отличается от JavaScript, ну хоть так.
И тут я понял, что меня бесит весь этот зоопарк. Я напишу свою функцию, с блэкджеком и которая будет работать одинаково для Python и JavaScript. Я назову ее draw_rect, и буду передавать в нее параметры:
ctx – контекст для рисования
x – координата x левого верхнего угла
y – координата y левого верхнего угла
width – ширина
height – высота
color – цвет
JavaScript:
Python:
Теперь я могу во всяком случае не вникать в эти дебри каждый раз, когда нужно нарисовать прямоугольник.
В заключение этого выпуска я сделаю следующее:
- Закрашу весь холст белым цветом
- Нарисую на белом фоне черный квадрат
на Javascript:
draw_rect(ctx, 0, 0, 400, 400, 'rgb(255,255,255)');
draw_rect(ctx, 100, 100, 200, 200, 'rgb(0,0,0)');
на Python:
draw_rect(ctx, 0, 0, 400, 400, (255,255,255))
draw_rect(ctx, 100, 100, 200, 200, (0,0,0))
pygame.display.update()
Мне удалось добиться почти полного соответствия в вызове функций. Правда, в Питоне после всех операций рисования нужно вызвать еще функцию pygame.display.update(). Дело в том, что в библиотеке pygame рисование производится в специальный буфер памяти, который потом, когда все объекты отрисованы, целиком выводится на экран. Так графика работает более эффективно.
Вот скриншот того, что получилось, на Питоне:
Вот полный код на Питоне.
А код и работу JavaScript вы можете проверить живьем по данной ссылке (а также исправить там что-нибудь).
Теперь я умею рисовать квадраты любого размера и цвета, и надеюсь, что в следующей части меня уже ничто не остановит.
Читайте дальше: Давайте уже рисовать
