2015-09-06
199
Web-сценарий из листинга 17.2 рисует треугольник без заливки. Рассмотрим последовательность действий:
1. Вызовом метода beginPath сообщаем Web-обозревателю, что собираемся рисовать контур сложной фигуры.
2. Методом moveTo устанавливаем перо в точку, где начнется рисование.
3. С помощью метода lineTo рисуем две линии, которые станут сторонами треугольника.
4. Третью сторону мы рисовать не будем, а лучше вызовем метод closePath, чтобы Web-обозреватель сам нарисовал ее, замкнув нарисованный нами контур.
5. Вызываем метод stroke, чтобы закончить рисование треугольника без заливки.
Дуги
Дуги рисуются тоже довольно просто. Для этого используется метод arc:
<контекст рисования>.arc(<горизонтальная координата>, <вертикальная координата>, <радиус>, <начальный угол>, <конечный угол>, true|false)
Первые два параметра задают горизонтальную и вертикальную координаты центра рисуемой дуги в виде числа в пикселах. Третий параметр определяет радиус дуги, также в пикселах и в виде числа. Четвертый и пятый параметры задают начальный и конечный углы дуги в радианах в виде чисел; эти углы отсчитываются от горизонтальной оси. Если шестой параметр имеет значение true, то дуга рисуется против часовой стрелки, а если false — по часовой стрелке. Метод arc не возвращает результата.
|
|
|
Рисование дуги начинается в точке, где в данный момент установлено перо. После рисования дуги перо будет установлено в точке, где кончается эта дуга.
Как уже говорилось, начальный и конечный углы рисуемой дуги задаются в радианах, а не в градусах. Пересчитает величину угла из градусов в радианы нам следующее выражение JavaScript:
radians = (Math.PI / 180) * degrees;
Здесь переменная degrees хранит значение угла в градусах, а переменная radians будет хранить то же значение, но в радианах. Свойство PI объекта JavaScript Math хранит значение числа π.
Задание 3: реализуйте Web-сценарий, который рисует окружность без заливки:
Отметим, какие параметры метода arc, в частности, значения начального и конечного угла, мы задавали в этом случае.
