Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Создание фигур

.

Создание фигур

Мы не ограничены в своем творчестве одними лишь прямоугольниками — можно нарисовать практически все что угодно! Правда, встроенные методы рисования есть только для прямоугольников и кнадратов — нарисовать, к примеру, окружность немного сложнее.

Для начала необходимо определить контуры будущей фигуры при помощи специальных объектов — путей (paths) .

Пути — это контуры наших будущих линий, дуг и фигур, ВО пути не видны до тех пор, пока им не присвоен цвет обводки (stroke). Когда мы рисовали прямоугольники, сначала мы задали, а затем вызвали fillRect. Для более сложных фигур нам следует выполнить три шага: нарисовать с помощью path контур, присвоить ему цвет обводки и затем залить фигуру. Но, как и в случае с прямоугольником, мы можем просто задать цвет обводки и не заливать фигуру цветом, или же не обводить контур, а просто залить фигуру, или сделать и то и другое. Для начала сделаем простую окружность:

Создание фигур

Теперь нужно нарисовать дугу (arc). Дуга — сегмент окружности. У нас нет метода для рисования окружностей, но мы можем просто нарисовать дугу в 360°. Давайте сделаем это, используя метод arc:

Создание фигур

Метод arc имеет следующий синтаксис: arc (х, у, radius, startAngle,  endAngle,  anticlockwise).

х и у — координаты точки, вокруг которой строится дуга. Для простоты считайте ее центром окружности, которую вам надо нарисовать, radius — расстояние от этой точки до дуги.

start Angle и endAngle — это начальная и конечная точки построения дуги. Дуга измеряется в радианах, длина полной окружности равна 2сз радиан. Если мы хотим нарисовать замкнутую окружность, конечная точка должна иметь координату 2т. В JavaScript мы можем получить это значение, умножив на 2 константу Math. PI. anticlockwise — необязательный аргумент. Если вы хотите, чтобы дуга рисовалась против часовой стрелки, измените его значение на true. Но поскольку наша окружность будет замкнутой, не имеет никакого значения, в каком направлении ее рисовать, и мы можем спокойно опустить этот аргумент.

Следующий шаг — «закрыть» путь, совместив начальную и конечную точки. Для этого используется метод closePath:

Создание фигур

Путь готов! Но пока мы не зададим цвет окантовки или не зальем его, мы не сможем его увидеть. Таким образом, если мы хотим увидеть пустую окружность, мы должны задать свойство strokeStyle, или же fillStyle, если нам нужен залитый цветом круг. По умолчанию ширина заливки составляет 1 пиксел — это значение хранится в свойстве lineWidth объекта контекста. Давайте сделаем нашу обводку немного шире, изменив значение lineWidth на 3:

Создание фигур

Создание фигур

Наконец, мы закрашиваем и обводим нашу окружность. Обратите внимание, что названия используемых методов отличаются от использованных при работе с прямоугольником. Для заливки фигуры используется метод fill, а для обводки — stroke:

Создание фигур

На рисунке 11.6 вы видите получившийся круг.

Создание фигур

Рис. 11.6. Наш новенький солнечный круг

Для тех кто хочет больше узнать о рисовании фигур, на Mozilla Developer Network имеется прекрасное руководство.


.

Читайте так же:
Not found