Шрифт:
var width = c.measureText(text).width;
21.4.10. Отсечение
После определения контура обычно вызывается метод
stroke
или fill
(или оба). Можно также вызвать метод clip,
чтобы определить область отсечения. После того как область отсечения будет определена, рисование будет выполняться только в ее пределах. На рис. 21.13 изображен сложный рисунок, полученный с использованием областей отсечения. Вертикальная полоса в середине и текст вдоль нижнего края рисунка были нарисованы до определения области отсечения, а заливка была выполнена после определения треугольной области отсечения.
Рис, 21.13, Рисование контуров выполнено до, а заливка - после определения области отсечения
Изображение на рис. 21.13 было получено с помощью метода
polygon
из примера 21.4 и следующего программного кода:
// Определить некоторые графические атрибуты
с.font = "bold 60pt sans-serif"; // Большой шрифт
c.lineWidth = 2; // Узкие
с.strokeStyle = "#000"; // и черные линии
// Контур прямоугольника и текст
с.strokeRect(175, 25, 50, 325); // Вертикальная полоса в середине
с. strokeText("<canvas>”, 15, 330); // strokeText вместо fillText
// Определить сложный контур, внутренняя область которого является внешней.
polygon(c,3,200,225, 200); // Большой треугольник
polygon(c,3,200,225,100,0,true); // Нарисовать маленький треугольник
// в обратном направлении
// Превратить этот контур в область отсечения.
c.clip;
// Нарисовать контур линиями толщиной 5 пикселов, внутри области отсечения.
c.lineWidth = 10; // Половина этой линии толщиной 10 пикселов окажется
// за пределами области отсечения
с.stroke;
// Залить область контура прямоугольника и текста, попавшую в область отсечения
c.fillStyle = "#ааа" // Светло-серый
с.fillRect(175, 25, 50, 325); // Залить вертикальную полосу
c.fillStyle = "#888" // Темно-серый
с.fillText("<canvas>", 15, 330); // Залить текст
Важно отметить, что при вызове метода
clip
выполняется усечение самого текущего контура, и этот новый усеченный контур становится новой областью отсечения. Это означает, что метод clip
может только сжимать область отсечения и не способен расширять ее. Метода, который позволил бы сбросить область отсечения, не существует, поэтому перед вызовом метода clip
следует вызвать метод save,
чтобы позднее можно было вернуться к неусеченному контуру вызовом метода restore
. 21.4.11. Тени
Объект
CanvasRenderingContext2D
имеет четыре свойства графических атрибутов, управляющих рисованием теней. Если присвоить этим свойствам соответствующие значения, любые линии, области, текст или изображения будут отбрасывать тени, что создаст эффект расположения этих элементов над поверхностью холста. На рис. 21.14 показано, как выглядят тени, отбрасываемые закрашенным прямоугольником, контуром прямоугольника и закрашенным текстом.
Рис, 21.14, Автоматически сгенерированные тени
Свойство
shadowColor
определяет цвет тени. Значением по умолчанию является полностью прозрачный черный цвет, и тени остаются невидимыми, если только не присвоить этому свойству значение, соответствующее полупрозрачному или непрозрачному цвету. Этому свойству допускается присваивать только строковые значения цвета: для рисования теней не могут использоваться шаблоны и градиенты. Использование полупрозрачных цветов дает более реалистичное изображение теней из-за просвечивания фона.