Попробуйте нарисовать этого веселого человечка при помощи
методов beginPath, moveTo, lineTo и stroke. Изобразить
голову (это квадрат 20 × 20 пикселей с шириной линии
4 пикселя) можно, воспользовавшись методом strokeRect.
Заливка путей цветом
Мы уже знакомы с методом для рисования прямоугольных контуров
strokeRect, методом fi llRect для рисования заполненных цветом пря-
моугольников, а также методом stroke для обводки путей. Эквивалентом
Fill —
fi llRect для путей является метод fi ll. Если вам нужно заполнить замкну-
заполнить
тый путь цветом, а не просто обвести его, используйте fi ll вместо stroke.
Например, следующий код рисует домик синего цвета, как на рис. 13.7.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "Blue";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(100, 60);
ctx.lineTo(130, 30);
ctx.lineTo(160, 60);
ctx.lineTo(160, 100);
ctx.lineTo(100, 100);
ctx.fill();
Рис. 13.7. Синий домик, залитый цветом с помощью метода fi ll
Разберем этот код. Установив синий цвет рисования (Blue), мы
задаем путь при помощи beginPath, а затем методом moveTo передви-
гаем точку начала рисования в позицию (100, 100). Далее мы пять раз
(по разу для каждого угла домика) вызываем lineTo с разными наборами
200 Часть III. Графика
координат. Последний из вызовов lineTo замыкает путь, возвращаясь
к первоначальной точке (100, 100).
На рис. 13.8 показан тот же самый домик с подписанными значени-
ями координат.
(130, 30)
(100, 60)
(160, 60)
(100, 100)
(160, 100)
Рис. 13.8. Домик с рис. 13.7, координаты подписаны
И наконец, в строке вызовом fi ll мы заполнили путь выбранным
ранее синим цветом.
Рисование дуг и окружностей
Кроме прямых линий на «холсте» можно рисовать дуги и окружности —
для этого предназначен метод arc. Чтобы изобразить окружность, нужно
Arc — дуга
задать ее центр и радиус (расстояние от центра до контура), а также
указать, какую часть окружности нужно нарисовать, задав начальный
и конечный угол. Таким образом, можно нарисовать как полную окруж-
ность, так и ее часть — дугу.
Начальный и конечный углы измеряются в радианах. Полная окруж-
ность начинается с угла 0 (от ее правого края) и продолжается до угла
π × 2 радиан. То есть, чтобы нарисовать полную окружность, нужно
передать методу arcуглы 0 и π × 2. На рис. 13.9 показана окружность
с подписанными значениями углов в радианах, а также градусах.
Как 360°, так и π × 2 радиан соответствуют полной окружности.
π × 3 / 2 радиан (270°)
π × 2 радиан (360°)
π радиан (180°)
0 радиан (0°)
π / 2 радиан (90°)
Рис. 13.9. Градусы и радианы, отсчитанные от правого края окружности,
по часовой стрелке
13. Элемент canvas 201
Следующий код изобразит на экране четверть окружности, половину
окружности и полную окружность, как показано на рис. 13.10.
ctx.lineWidth = 2;
ctx.strokeStyle = "Green";
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 для рисования по часовой стрелке.
Теперь с помощью этой функции можно изобразить любое количе-
ство окружностей, задавая лишь координаты их центров и радиусы.
Например, следующий код рисует набор разноцветных окружностей
одна в другой:
ctx.lineWidth = 4;
ctx.strokeStyle = "Red";
circle(100, 100, 10);
ctx.strokeStyle = "Orange";
circle(100, 100, 20);
ctx.strokeStyle = "Yellow";
circle(100, 100, 30);
ctx.strokeStyle = "Green";
circle(100, 100, 40);
ctx.strokeStyle = "Blue";
circle(100, 100, 50);
ctx.strokeStyle = "Purple";
circle(100, 100, 60);
Результат будет выглядеть как на рис. 13.14. Сначала мы задаем
ширину линии — 4 пикселя. Затем устанавливаем strokeStyle
в Red (красный цвет) и вызываем функцию circle, чтобы нарисовать
204 Часть III. Графика
окружность в точке (100, 100) с радиусом 10 пикселей. Это центральное
красное кольцо.
Рис. 13.14. Цветные концентрические окружности,
нарисованные с помощью функции circle
Таким же образом мы рисуем оранжевую окружность — координаты
остаются прежними, но радиус теперь равен 20 пикселям. Затем желтую
окружность — снова там же, но с радиусом 30 пикселей. Три последние
окружности (зеленая, синяя и фиолетовая) также имеют общий центр
с предыдущими, а их радиусы последовательно возрастают.
ПОПР ОБУ ЙТЕ !
Как изменить функцию circle, чтобы она заполняла
окружности цветом, а не обводила их? Добавьте четвертый
аргумент — булево значение, которое определяет, нужно
ли заполнять окружность или рисовать контур. Можно
назвать этот аргумент fi llCircle.
Нарисуйте с помощью измененной функции такого
снеговика, используя как заполненные окружности, так
и пустые.
Что мы узнали
В этой главе мы познакомились с HTML-элементом canvas.
Благодаря ему мы можем с легкостью изображать на экране прямо-
угольники, линии и окружности, управляя их положением, шири-
ной линии, цветом и т. д.
В следующей главе мы узнаем, как с помощью некоторых при-
емов, изученных в девятой главе, сделать так, чтобы картинки
двигались.
13. Элемент canvas 205
УПРА ЖНЕНИЯ
Выполните эти упражнения, чтобы попрактиковаться в рисова-
нии с помощью canvas.
#1. Функция, рисующая снеговика
Создайте на основе вашего кода для рисования снеговика
Draw
(см. с. 205) функцию drawSnowman, которая рисует снеговика
snowman —
в указанной позиции на «холсте», — так, чтобы в результате
нарисовать
вызова:
снеговика
drawSnowman(50, 50);
снеговик появился в позиции (50, 50).
#2. Рисование по массиву точек
Draw points —