Ник Морган - JavaScript для детей. Самоучитель по программированию

ctx.beginPath();

Pi — англий-

 ctx.arc(50, 50, 20, 0, Math.PI / 2, false);

ская запись

ctx.stroke();

числа π

ctx.beginPath();

 ctx.arc(100, 50, 20, 0, Math.PI, false);

ctx.stroke();

ctx.beginPath();

 ctx.arc(150, 50, 20, 0, Math.PI * 2, false);

ctx.stroke();

Рис. 13.10. Рисование четверти окружности,

половины окружности и полной окружности

В следующих трех разделах мы рассмотрим каждую из этих фигур.

Рисуем четверть окружности

Первый фрагмент кода рисует четверть окружности. В стро-

ке , после вызова beginPath, мы вызываем метод arc,

задав центр окружности в точке (50, 50) и радиус 20 пиксе-

лей. Начальный угол мы установили в 0 (то есть дуга будет

рисоваться с правого края окружности), а конечный угол

в Math.PI / 2. Math.PI — это обозначение числа π (пи)

в JavaScript. Полная окружность — это π × 2 радиан, π радиан

соответствует половине окружности, π / 2 радиан (значение,

которое мы используем в данном случае) — четверть окружно-

сти. Начальный и конечный углы показаны на рис. 13.11.

202 Часть III. Графика

20 пикселей

0 радиан (0°)

π / 2 радиан (90°)

Рис. 13.11. Начальный угол (0 радиан, или 0°) и конечный угол (π / 2 радиан, или 90°)

четверти окружности

В качестве последнего аргумента мы указали false — это значит,

что рисовать дугу нужно по часовой стрелке. Если вам понадобится рисо-

вать против часовой стрелки, передайте последним аргументом true.

Рисуем половину окружности

Теперь нарисуем половину окружности. При вызове метода arc

в строке  мы указали центр в точке (100, 50) — это на 50 пикселей пра-

вее центра первой дуги, (50, 50). Радиус снова равен 20 пикселям, и мы

опять начинаем рисовать с угла в 0 радиан, однако конечный угол теперь

равен Math.PI, что соответствует половине окружности. Начальный

и конечный углы показаны на рис. 13.12.

20 пикселей

π радиан (180°)

0 радиан (0°)

Рис. 13.12. Начальный угол (0 радиан, или 0°)

и конечный угол (π радиан, или 180°) половины окружности

Рисуем окружность

В строке  мы рисуем полную окружность. Ее центр — в точке (150, 50),

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

в 0 радиан и заканчивая углом в Math.PI * 2 радиан, что соответствует

полному обороту вокруг центра. Начальный и конечный углы показаны

на рис. 13.13.

20 пикселей

π × 2 радиан (360°)

0 радиан (0°)

Рис. 13.13. Начальный угол (0 радиан, или 0°)

и конечный угол (π × 2 радиан, или 360°) полной окружности

13. Элемент canvas 203

Рисование нескольких окружностей с помощью функции

Если нужно рисовать только полные окружности, метод arc несколько

сложноват: окружности всегда рисуют от 0 до π × 2 радиан, а направ-

ление (по часовой стрелке или против) не имеет значения. Кроме того,

чтобы изобразить окружность на экране, каждый раз придется вызывать

ctx.beginPath перед методом arc и ctx.stroke после него. Поэтому

имеет смысл написать функцию, которая позволит рисовать окружно-

сти, не углубляясь в детали, а указывая лишь значения x, y и радиуса.

Давайте так и сделаем.

var circle = function (x, y, radius) {

ctx.beginPath();

ctx.arc(x, y, radius, 0, Math.PI * 2, false);

ctx.stroke();

};

В теле функции мы первым делом вызываем ctx.beginPath,

указывая этим, что собираемся создать путь. Затем вызываем метод

ctx.arc, передавая ему значения аргументов x, y и radius. Как

и раньше, мы используем 0 для начального угла и Math.PI * 2 для конеч-

ного угла, а также false для рисования по часовой стрелке.