Шрифт:
Свойства
shadowOffsetX
и shadowOffsetY
определяют смещение тени по осям X и Y. По умолчанию оба свойства имеют значение 0, что соответствует размещению тени непосредственно под рисунком, где она невидима. Если присвоить обоим свойствам положительные значения, тени будут нарисованы правее и ниже рисунка, как если бы источник света, освещающий холст, находился за пределами экрана левее и выше. Чем больше смещение, тем длиннее отбрасываемая тень и тем «выше» над холстом будет казаться нарисованный объект. Свойство
shadowBlur
определяет, насколько размытым будет выглядеть край тени. По умолчанию это свойство имеет значение 0, которому соответствую четкие, неразмытые тени. Большие значения производят более сильный эффект размытия, до определенной степени, определяемой реализацией. Значение этого свойства используется как параметр Гауссовой функции размытия и не является размером или длиной в пикселах. В примере 21.8 представлен программный код, который использовался для получения изображения на рис. 21.14 и демонстрирующий использование всех четырех свойств, управляющих отображением теней.
Пример 21.8. Установка параметров тени
// Определить узкую тень
с.shadowColor = "rgba(100.100,100,.4)”; // Полупрозрачный серый цвет
с.shadowOffsetX = с.shadowOffsetY =3; // Тень смещена вправо вниз
с.shadowBlur = 5; // Размытые границы тени
// Нарисовать текст в синем прямоугольнике с этими параметрами тени
c.lineWidth =10; с.strokeStyle = "blue";
с.strokeRect(100, 100, 300, 200); // Нарисовать прямоугольник
с.font = "Bold 36pt Helvetica";
c.fillText("Hello World", 115, 225); // Нарисовать текст
// Определить более широкую тень. Большие значения смещений создают эффект более высокого
// расположения объекта. Обратите внимание, как полупрозрачная тень смешивается
// с синим контуром прямоугольника,
с.shadowOffsetX = с.shadowOffsetY = 20;
с.shadowBlur = 10;
c.fillStyle = "red"; // Нарисовать сплошной красный прямоугольник,
с.fillRect(50,25,200,65); // располагающийся выше синего прямоугольника
Значения свойств
shadowOffsetX
и shadowOffsetY
всегда определяются в системе координат по умолчанию и не подвержены действию методов rotate
и scale
. Допустим, к примеру, что вы повернули систему координат на 90 градусов, чтобы нарисовать текст по вертикали и затем вернулись к прежней системе координат, чтобы нарисовать текст по горизонтали. Обе текстовые надписи, вертикальная и горизонтальная, будут отбрасывать тень в одном направлении, что обычно соответствует нашим представлениям. Аналогично фигуры, нарисованные с применением различных преобразований, будут иметь тени с одинаковой «высотой». [57] 57
На момент написания этих строк в версии 5 броузера Google Chrome тени были реализованы с ошибкой, и их смещения были подвержены действию преобразований.
21.4.12. Изображения
Помимо векторной графики (контуры, линии и прочее), прикладной интерфейс объекта Canvas поддерживает также растровые изображения. Метод
drawImage
копирует в холст пикселы из исходного изображения (или из прямоугольной области исходного изображения), выполняя операции масштабирования и вращения, если они необходимы. Метод
drawImage
может вызываться с тремя, пятью или девятью аргументами. Во всех случаях в первом аргументе ему передается исходное изображение. Часто в этом аргументе передается элемент <img>
или неотображаемый объект Image
, созданный с помощью конструктора Image.
Однако точно так же в первом аргументе можно передать другой элемент <canvas>
или даже элемент <video>.
Если методу drawImage
передать элемент <img>
или <video>,
который к этому моменту еще не завершил загрузку изображения, он ничего не скопирует. При вызове с тремя аргументами во втором и третьем аргументах методу
drawImage
передаются координаты X и Y верхнего левого угла области, в которую должно быть скопировано изображение. В этом случае в холст будет скопировано изображение целиком. Координаты X и Y будут интерпретироваться как координаты в текущей системе координат, поэтому при необходимости изображение будет масштабировано или повернуто. При вызове метода
drawImage
с пятью аргументами к аргументам с координатами X и Y, описанным выше, добавляются ширина и высота. Эти четыре аргумента определяют прямоугольную область внутри холста. Верхний левый угол исходного изображения будет помещен в точку (х.у), а правый нижний - в точку (x+width, y+height). Опять же в холст будет скопировано изображение целиком. Прямоугольная область назначения определяется в текущей системе координат. Эта версия метода выполнит масштабирование изображение, чтобы уместить его в отведенную область, даже если к исходной системе координат не применялось преобразование масштабирования.