Выразительный JavaScript (Хавербеке) - страница 181
Прямоугольники и куски текста можно рисовать одним вызовом метода. Методы >fillRect и >strokeRect рисуют прямоугольники, а >fillText и >strokeText выводят текст. Для создания произвольных форм нам нужно строить пути.
Вызов >beginPath начинает путь. Несколько методов добавляют линии и кривые к текущему пути. Например, >lineTo добавляет прямую. Когда путь закончен, его можно заполнить методом >fill или обвести методом >stroke.
Перемещение пикселей с картинки или другого холста на наш делается методом >drawImage. По умолчанию, он рисует всю исходную картинку, но с большим количеством параметров вы можете скопировать нужный участок изображения. В нашей игре мы использовали эту возможность, копируя разные позы игрового персонажа из частей картинки, содержавшей много поз.
Перемещения позволяют рисовать форму, ориентированную по-разному. Двумерный контекст хранит текущее преобразование, которое можно менять через методы >translate, >scale и >rotate. Это повлияет на все остальные операции рисования. Текущее состояние преобразований можно сохранить методом >save и восстановить методом >restore.
При рисовании анимаций на холсте можно использовать метод >clearRect для очистки частей холста перед перерисовкой.
Упражнения
Формы
Напишите программу, рисующую следующие фигуры:
1 трапецию
2 красный ромб
3 зигзаг
4 спираль из 100 отрезков
5 жёлтую звезду
Рисуя две последних, консультируйтесь с описаниями функций >Math.cos и >Math.sin из главы 13, которая описывает получение координат на круге с их использованием.
Рекомендую для каждой формы сделать функцию. Передавайте позицию и другие свойства, типа размера, количества точек. Вариант со вписыванием нужных чисел прямо в код обычно труднее читать и изменять.
>
>
Круговая диаграмма
Ранее мы видели пример программы для рисования круговой диаграммы. Поменяйте её, чтобы имя каждой категории было показано рядом с куском, который её представляет. Попробуйте отыскать симпатичный вариант автоматического позиционирования текста, который бы работал и на других наборах данных. Можно предположить, что нет категории меньше 5% (чтобы текст не громоздился друг на друга).
Вам снова могут понадобиться >Math.sin и >Math.cos.
>
>