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

  c.fillStyle = "#888" // Темно-серый
  с.fillText("<canvas>", 15, 330); // Залить текст

Важно отметить, что при вызове метода clip выполняется усечение самого текущего контура, и этот новый усеченный контур становится новой областью отсечения. Это означает, что метод clip может только сжимать область отсечения и не способен расширять ее. Метода, который позволил бы сбросить область отсечения, не существует, поэтому перед вызовом метода clip следует вызвать метод save, чтобы позднее можно было вернуться к неусеченному контуру вызовом метода restore.

21.4.11. Тени

Объект CanvasRenderingContext2D имеет четыре свойства графических атрибутов, управляющих рисованием теней. Если присвоить этим свойствам соответствующие значения, любые линии, области, текст или изображения будут отбрасывать тени, что создаст эффект расположения этих элементов над поверхностью холста. На рис. 21.14 показано, как выглядят тени, отбрасываемые закрашенным прямоугольником, контуром прямоугольника и закрашенным текстом.

Рис, 21.14, Автоматически сгенерированные тени

Свойство shadowColor определяет цвет тени. Значением по умолчанию является полностью прозрачный черный цвет, и тени остаются невидимыми, если только не присвоить этому свойству значение, соответствующее полупрозрачному или непрозрачному цвету. Этому свойству допускается присваивать только строковые значения цвета: для рисования теней не могут использоваться шаблоны и градиенты. Использование полупрозрачных цветов дает более реалистичное изображение теней из-за просвечивания фона.

Свойства 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). Опять же в холст будет скопировано изображение целиком. Прямоугольная область назначения определяется в текущей системе координат. Эта версия метода выполнит масштабирование изображение, чтобы уместить его в отведенную область, даже если к исходной системе координат не применялось преобразование масштабирования.