Предыдущий ролик Следующий ролик  

Видео урок: Сложные фигуры: дуги и контуры

HTML5: графика и анимация с Canvas

До сих пор мы изучали, как рисовать простые фигуры, такие как прямоугольники и линии. А теперь давайте рассмотрим, как рисовать более сложные фигуры, а именно, дуги и контуры. Что такое контур? Контур - это набор соединенных точек, и эти точки объединены линиями или кривыми. Контур может быть открытым или закрытым. В текущем рисующем контексте может быть один и только один текущий контур. Итак, контур может быть открытым или закрытым. В закрытом контуре есть конечная точка, и она является и начальной точкой. Или же canvas может автоматически нарисовать линию от конечной до начальной точки и закрыть контур для вас.

Чтобы начать создавать контур, вы используете метод beginPath, и он не принимает никаких аргументов. Вы просто говорите beginPath и начинаете рисовать контур. Чтобы добавить контуры, вы обычно используете один или несколько контурных шаблонов, и если вы наблюдали за мной в предыдущих роликах, вы видели, как это делать при помощи линий. В этом ролике мы рассмотрим, как это делается при помощи дуг. Чтобы обрамить текущий контур, вы вызываете функцию stroke, также без аргументов. Чтобы заполнить его, вы вызываете fill. Обе эти функции вызываются без аргументов, и они обрамят и заполнят контур. Чтобы закрыть текущий контур, если вы хотите его закрыть, вы вызываете closePath.

Если конечная точка не является начальной точкой, canvas закроет контур для вас. Давайте сейчас поговорим о дугах. Дуги - это кривые, которые являются частями окружности, по факту, окружность - это тоже дуга. Просто это такой особый случай. Это дуга в 360 градусов. Чтобы нарисовать дугу, вы используете либо функцию arc, либо функцию arcTo. У функции arc есть несколько аргументов. Первый - это точка X и Y , которая будет служить центром круга, если дуга является полной окружностью.

Аргумент r - это радиус, который определяет, насколько далеко дуга расположена от этого воображаемого центра круга. Чтобы провести путь к окружности, которую представляет дуга, нам нужно указать начальный угол и конечный угол. И последний аргумент - true, если вы хотите, чтобы дуга шла против часовой стрелки, а не по часовой, и это значение по умолчанию. Вторая функция - это arcTo, она принимает две точки и радиус в качестве аргументов. И, наконец, функция closePath, о которой я упоминал ранее, она закрывает текущий контур.

Я хочу отметить, что когда вы используете углы, как здесь, эти углы рассчитываются в радианах, а не в градусах. Если вы хотите использовать градусы, а не радианы, вы вызываете очень простую математическую функцию, которая принимает Math.PI, что вы делите на 180, вы делаете умножение на градусы и это даст вам радианы. Давайте рассмотрим несколько примеров с дугами. Помните, что 360 градусов - это то же самое, что 2 pi радиан. Вот эта дуга, у нас есть начальная и конечная точка, и мы здесь рисуем дугу в 90 градусов.

Мы вызываем beginPath, чтобы начать рисовать, и мы создаем дугу с центром в точке 50 и 150. Вот здесь мы определяем центр. Значение 100 - это радиус, он идет на 100 пикселей от центра до конца дуги. Мы начинаем от отметки в 1.5 радиан и идем до отметки в 2 радианы, то есть, мы начнем здесь, а закончим вот тут. Давайте рассмотрим другой пример. В данном случае у нас будет дуга, которая идет по другому пути. чтобы обрамить дугу в 270 градусов, опять же, мы вызываем beginPath.

У нас есть центр в точке X и Y - вот эта центральная точка. Радиус будет 100. Мы идем от нулевой части угла по кругу до отметки в 1.5 радиан, в данном случае, против часовой стрелки. Давайте рассмотрим несколько реальных примеров, чтобы увидеть, как все работает. Вот мы в редакторе кода, файл с кусками кода открыт в разделе paths, это пример paths_starts для данной главы. Давайте скопируем и вставим несколько из этих примеров. Я беру эти первые строки наряду с первым примером, копирую, вставляю, сохраняю. Переходим в браузер и выбираем paths.start.

Вы видите, что у нас есть три линейных сегмента для этого конкретного контура. Смотрим. strokeStyle установлено на blue, а fillStyle на red, вот какие настройки мы сейчас используем. lineWidth установлено на 5. Мы собираемся нарисовать открытый контур. Вызываем beginPath. Перемещаем карандаш в начальную точку, добавляем три строковых сегмента, затем мы делаем обрамление, таким образом, наши три линейных сегмента будут нарисованы. Ок, давайте скопируем следующие строки. сейчас мы нарисуем закрытый контур, копируем, вставляем.

Как всегда, вызываем beginPath. Еще несколько операций. Перемещаем карандаш, рисуем три линейных сегмента, только в данном случае мы вызываем closePath, прежде чем вызвать stroke. Сохраняем, возвращаемся в браузер и обновляем страницу. Вы видите, что у нас есть эти же три линейных сегмента, но в данном случае из-за вызова closePath canvas добавил финальную линию, чтобы конечная точка была такой же, как и начальная. Еще один пример. Возвращаемся к коду, вот наши куски кода.

На сей раз мы нарисуем закрытый контур. Копируем вот отсюда эти строки. Вставляем их. И на этот раз у нас трехлинейные сегменты, но в данном случае в дополнение к функции stroke мы вызовем и функцию fill, и обратите внимание, что здесь нет вызова closePath. Сохраняем, возвращаемся в браузер и обновляем страницу. Вы видите, что контур обрамлен - он не закрыт, но если он заполнен, кажется, что он закрыт, прямо вот здесь находится воображаемая граница, созданная текущим fillStyle.

Мы рассмотрели контуры, а теперь давайте рассмотрим дуги. Я открыл пример arcs_start, вот мы в файле snippets. Возвращаемся к дугам, они тут. Копирую первый пример и вставляю его. Сохраняю и показываю его в браузере.

Здесь у нас 90-градусная дуга. И чтобы показать вам результат изменения радиуса, на этот раз сделаем радиус 150. Сохраняем, обновляем и смотрим. Вы видите, что центральная точка осталась на месте, а радиус стал больше. Давайте скопируем еще один пример. В данном случае я копирую вот этот и вставляю его.

Сейчас мы окаймим дугу в три четверти. Мы переместили центральную точку, и радиус у нас 100 пикселей. И в данном случае у нас есть эти два угла, верно? У нас есть начальный угол. У нас есть конечный угол. Сохраняем, обновляем страницу. Вы видите, что дуга в данном случае нарисована против часовой стрелки, начинается он вот здесь и проходит три четверти окружности вот до этого пункта вокруг нашей центральной точки. Ок, последний пример. Давайте нарисуем круг, копируем эти строки, вставляем.

Все верно, в данном примере мы начали с нуля. Проходим 2 пи радианы. Сохраняем, обновляем страницу, вот наш круг, где используется и заполнение, и обрамление, ведь мы вызвали обе функции, и fill, и stroke. Чтобы посмотреть, как работают радианы, давайте сделаем простой пример с градусами. Просто говорим 'var degrees равно 360', и говорим 'var radians равно Math.PI/180 * degrees', мы просто меняем радианы вот на это.

Поскольку мы начинаем с 360, не будет никакого результата. Но чтобы показать вам, что это одно и то же, обновляем страницу. Одно и то же. А теперь давайте поменяем, я не знаю, на 173 градуса, сохраняем и обновляем страницу. Вы видите, что это даже не половина круга, поскольку здесь нет 180 градусов, но вы поняли идею. Вы можете использовать радианы, у вас могут быть градусы, и вы можете конвертировать их в радианы. В этом уроке мы увидели, как рисовать контуры и дуги, используя шаблоны для контуров и дуг canvas. Мы рассмотрели, как рисовать открытые и закрытые контуры, как обрамлять и заполнять контуры. И, наконец, мы узнали, как рисовать дуги в обоих направлениях, используя радианы и градусы.