Справка по Canvas

Рассмотрим набор функций для работы с canvas

Получение контекста canvas для рисования элементов. В дальнейшем все манипуляции выполняются с контекстом ctx.

Изменяем размеры холста

Можно сразу изменять размеры холста:

Рисуем прямоугольники в Canvas

Для рисования прямоугольников используются следующие методы:

Для рисования удобно использовать сетку:

Сетка для canvas

Создание линий

Создание линий, кривых, дуг происходит по одинаковому алгоритму:

  • Даем команду начала нового пути beginPath()
  • Создаем линию, кривую, дугу любыми методами
  • Завершаем рисование пути командой closePath()
  • Обводим или закрашиваем путь медами stroke() или fill()

Закрашивание производится с помощью методов stroke() и fill(), но перед этим нужно задать цвет элемента или цвет заливки. Для этого используют команды:

Вернемся к созданию линии. Для создания линии необходимо позиционировать перо для рисования, это можно сделать с помощью moveTo(x,y), а затем дать команду рисования до точки с конечными координатами линии lineTo(x2, y2). Смотрим пример:

Дуги и круги

Для рисования дуг нужно воспроизвести те же круги, что и в предыдущем уроке. Для рисования дуг используются команды:

где:

  • x — координата x центра будущей дуги
  • y — координата y центра будущей дуги
  • radius — радиус дуги
  • startAngle — начальный угол, откуда начинается отрисовка дуги (углы задаются в радианах)
  • endAngle — конечный угол рисования
  • antiClockwise (true || false) — направление рисования дуги на canvas

Система координат рисования дуги: 0 (2pi) находится в правой дальней части. Наращивание угла идет по часовой стрелке. См. рисунок:

Сетка для canvas

Рисование кривых

Для рисования кривых передвиньте перо в точку, в которой необходимо начать рисовать кривую. Для рисования используйте метод:

Где x1,y1 — конечная точка, x2,y2 — координаты точки искривления кривой.

Для рисования кривой Безье необходимо задать конечную точку и две точки искривления:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *