Чтение онлайн

на главную - закладки

Жанры

JavaScript. Подробное руководство, 6-е издание
Шрифт:

с.rotate(60*deg); // Поворот обратно к началу

leg(п-1); // Последняя подветвь

}

c.restore; // Восстановить преобразование

с.translate(len, 0); // Но сместить в конец ветви (0,0)

}

}

snowf1аке(с,0,5,115,125); // Снежинка нулевого уровня является

// равносторонним треугольником

snowflake(c,1,145,115,125); // Снежинка первого уровня - шестиконечная звезда

snowflake(c,2,285,115,125); // и так далее.

snowflake(c,3,425.115.125);

snowflake(c,4,565,115,125); // Снежинка четвертого уровня выглядит как снежинка!

c.stroke; // Нарисовать этот очень сложный контур

21.4.5. Рисование и заливка кривых

Контур - это последовательность фрагментов контура, а фрагмент контура - это последовательность точек, соединенных линиями. В контурах, которые определялись в разделе 21.4.1, эти точки соединялись прямыми линиями, но это не обязательно должно быть так. Объект

CanvasRenderingContext2D
определяет несколько методов, которые добавляют во фрагмент контура новую точку и соединяют ее кривой с текущей точкой:

агс

Этот метод добавляет во фрагмент контура дугу. Он соединяет текущую точку с началом дуги прямой линией и затем соединяет начало дуги с концом дуги сегментом окружности, при этом конечная точка дуги становится новой текущей точкой. Дуга определяется шестью параметрами: координаты X и Y центра окружности, радиус окружности, угол начала и конца дуги и направление (по часовой стрелке или против часовой стрелки) рисования дуги между этими двумя углами.

агсТо

Этот метод так же рисует прямую линию и круговую дугу, как и метод

агс,
но при его использовании дуга определяется другим набором параметров. Аргументы метода
агсТо
определяют точки Р1 и Р2 и радиус. Дуга, добавляемая в контур, имеет указанный радиус и строится так, что линии, соединяющие текущую точку с точкой Р1 и точку Р1 с точкой Р2, являются касательными к ней. Такой необычный, на первый взгляд, способ определения дуг в действительности является весьма удобным при рисовании закругленных углов. Если указать радиус равный 0, этот метод просто нарисует прямую линию, соединяющую текущую точку и точку Р1. Однако если указан ненулевой радиус, он нарисует прямую линию от текущей точки в направлении точки Р1 до начала дуги, затем начнет рисовать круговую дугу, пока направление рисования не совпадет с направлением на точку Р2.

bezierCurveTo

Этот метод добавит во фрагмент контура новую точку Р и соединит ее с текущей точкой кубической кривой Безье. Форма кривой определяется двумя «контрольными точками» С1 и С2. В начале кривой (в текущей точке) рисование начинается в направлении точки С1. В свой конец (в точке Р) кривая приходит в направлении из точки С2. Между этими точками кривая плавно изгибается. Точка Р становится новой текущей точкой для фрагмента контура.

quadraticCurveTo

Этот метод похож на метод

bezierCurveTo,
но рисует квадратичные кривые Безье и имеет всего одну контрольную точку.

С помощью этих методов можно рисовать контуры, подобные тем, что изображены на рис. 21.9.

В примере 21.7 представлен программный код, с помощью которого было создано изображение на рис. 21.9. Методы, используемые в этом примере, являются одними из самых сложных в прикладном интерфейсе объекта Canvas. Полное описание методов и их аргументов приводится в справочном разделе книги.

Пример 21.7. Добавление кривых в контур

// Вспомогательная функция для преобразования градусов в радианы

function rads(x) { return Math.PI*x/180; }

// Нарисовать окружность. Используйте масштабирование и вращение, если требуется

// получить эллипс. Здесь не используется текущая точка, поэтому окружность рисуется

// без прямой линии, соединяющей текущую точку с началом окружности,

с.beginPath;

с.агс(75,100,50, // Центр в точке (75,100), радиус 50

0,rads(360),false); // По часовой стрелке от 0 до 360 градусов

// Нарисовать сектор. Углы откладываются по часовой стрелке от положительной оси х.

// Обратите внимание, что метод агс добавляет линию от текущей точки к началу дуги.

c.moveTo(200, 100); // Перейти в центр окружности

с.агс(200, 100, 50, // Центр окружности и радиус

rads(-60), rads(0), // Начальный угол -60 градусов, конечный 0 градусов

false); // false означает по часовой стрелке

Поделиться:
Популярные книги

Хозяин Теней 2

Петров Максим Николаевич
2. Безбожник
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Хозяин Теней 2

Неучтенный элемент. Том 6

NikL
6. Антимаг. Вне системы
Фантастика:
фэнтези
5.00
рейтинг книги
Неучтенный элемент. Том 6

Кодекс Охотника. Книга IV

Винокуров Юрий
4. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга IV

Вперед в прошлое 2

Ратманов Денис
2. Вперед в прошлое
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Вперед в прошлое 2

Российские фантасмагории (сборник)

Булгаков Михаил Афанасьевич
Юмор:
юмористическая проза
5.00
рейтинг книги
Российские фантасмагории (сборник)

Убивать чтобы жить 3

Бор Жорж
3. УЧЖ
Фантастика:
героическая фантастика
боевая фантастика
рпг
5.00
рейтинг книги
Убивать чтобы жить 3

Бастард Императора. Том 2

Орлов Андрей Юрьевич
2. Бастард Императора
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Бастард Императора. Том 2

Диверсант

Вайс Александр
2. Фронтир
Фантастика:
боевая фантастика
космическая фантастика
5.00
рейтинг книги
Диверсант

Мажор. Дилогия.

Соколов Вячеслав Иванович
Фантастика:
боевая фантастика
8.05
рейтинг книги
Мажор. Дилогия.

Вечный. Книга I

Рокотов Алексей
1. Вечный
Фантастика:
боевая фантастика
попаданцы
рпг
5.00
рейтинг книги
Вечный. Книга I

По осколкам твоего сердца

Джейн Анна
2. Хулиган и новенькая
Любовные романы:
современные любовные романы
5.56
рейтинг книги
По осколкам твоего сердца

Изгой Проклятого Клана. Том 3

Пламенев Владимир
3. Изгой
Фантастика:
аниме
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
Изгой Проклятого Клана. Том 3

На границе империй. Том 6

INDIGO
6. Фортуна дама переменчивая
Фантастика:
боевая фантастика
космическая фантастика
попаданцы
5.31
рейтинг книги
На границе империй. Том 6

Стеллар. Трибут

Прокофьев Роман Юрьевич
2. Стеллар
Фантастика:
боевая фантастика
рпг
8.75
рейтинг книги
Стеллар. Трибут