FrontendLectures/A/10Canvas.md

Canvas

Canvas (холст) позволяет рисовать растр на прямоугольной части веб-страницы, представленной тэгом canvas.

Модель рисования.

Модель отрисовки скопирована с PostScript, язык программирования для принтеров, который, в свою очередь так же стал в основе PDF. Целью подобной модели была векторная отрисовка на любом устройстве вывода, независимо от устройства и разрешения.

Пути

Path - множество точек, и линий которые составляют ту или иную двумерную фигуру. Точки и кривые в путь добавляются последовательно, после чего путь закрывается, и может быть отрисован как контур (stroke) или залит тем или иным паттерном (fill). Настройка цвета и стиля во много схожа с CSS.

Координаты и аффинные преобразования

По умолчанию Canvas имеет координатную сетку, совпадающую с пикселем в браузере. Однако с помощью аффинных преобразований вы можете модифицировать координатную сетку в любой момент для удобства отрисовки. Поддерживаются операции смещения (translate), масштабирования (scale) и вращения (rotate). Аффинные преобразования можно применять после каждого fill или stroke для тех или иных эффектов.

Тригонометрия

Математический сопроцессор, и, как следствие, подавляющее большинство языков программирования для измерения углов и тригонометрических функций использует радианы. Если вам нужны градусы - вы всегда можете написать функции перевода из градусов в радианы и наоборот. А в целом, привыкайте для этих целей использовать Math.PI как множитель.