— "repeat" — изображение будет повторяться по горизонтали и вертикали;
— "repeat-x" — изображение будет повторяться только по горизонтали;
— "repeat-y" — изображение будет повторяться только по вертикали;
— "no-repeat" — изображение не будет повторяться никогда; в этом случае часть фигуры останется не занятой им.
Метод createPattern возвращает экземпляр объекта CanvasPattern, представляющий созданный нами графический цвет:
var cpSample = ctxCanvas.createPattern(imgSample, "repeat");
Третий этап — использование готового графического цвета — выполняется так же, как для градиентов, т. е. присваиванием его свойству strokeStyle или fillStyle.
Пример:
ctxCanvas.fillStyle = cpSample;
ctxCanvas.fillRect(0, 0, 200, 100);
Этот Web-сценарий рисует прямоугольник с заливкой на основе созданного нами ранее графического цвета.
Графический цвет не фиксируется на канве, а полностью применяется к рисуемой фигуре. В этом его принципиальное отличие от градиентов.
НА ЗАМЕТКУ
В приведенном ранее примере мы предположили, что файл graphic_color.jpg имеет небольшие размеры или уже присутствует в кэше Web-обозревателя и поэтому загрузится очень быстро. Но если он, так сказать, "задержится в пути", Web-сценарий не выполнится. Поэтому изображения, хранящиеся в других файлах, выводятся по иной методике, которую мы скоро рассмотрим.
Вывод внешних изображений
Внешним по отношению к канве называется графическое изображение, хранящееся в отдельном файле, или содержимое другой канвы. Канва предоставляет довольно мощные средства для вывода таких изображений: мы можем изменить размеры изображения и даже вывести только его часть.
Вывести внешнее изображение на канву проще всего методом drawImage, точнее, его сокращенным форматом:
<контекст рисования>.drawImage(<графическое изображение или канва>,<горизонтальная координата>, <вертикальная координата>)
Первый параметр задает графическое изображение в виде экземпляра объекта Image или канву в виде экземпляра объекта HTMLCanvasElement. Второй и третий параметры определяют координаты точки канвы, где должен находиться верхний левый угол выводимого изображения; они задаются в пикселах в виде чисел. Метод drawImage не возвращает результата.
Вот Web-сценарий, который загружает изображение из файла someimage.jpg и выводит его на канву так, чтобы его верхний левый угол находился в точке [0,0], т. е. в верхнем левом углу канвы:
var imgSample = new Image();
imgSample.src = "someimage.jpg";
ctxCanvas.drawImage(imgSample, 0, 0);
Если нам нужно при выводе внешнего изображения изменить его размеры, к нашим услугам расширенный формат метода drawImage:
<контекст рисования>.drawImage(<графическое изображение или канва>,<горизонтальная координата>, <вертикальная координата><ширина>, <высота>)
Первые три параметра нам уже знакомы. Четвертый и пятый параметры задают, соответственно, ширину и высоту выводимого изображения в пикселах в виде чисел.
Вот пример Web-сценария, который выводит загруженное ранее изображение, растягивая его так, чтобы занять канву целиком:
ctxCanvas.drawImage(imgSample, 0, 0, 400, 300);
Рассмотрим теперь самый сложный случай — вырезание из внешнего изображения фрагмента и вывод его на канву с изменением размеров. Для этого применяется третий по счету формат метода drawImage:
<контекст рисования>.drawImage(<графическое изображение или канва>,<горизонтальная координата вырезаемого фрагмента>,<вертикальная координата вырезаемого фрагмента><ширина вырезаемого фрагмента>, <высота вырезаемого фрагмента>,<горизонтальная координата вывода>, <вертикальная координата вывода>,<ширина вывода>, <высота вывода>)
Первый параметр нам уже знаком и задает внешнее изображение.
Второй и третий параметры определяют координаты верхнего левого угла вырезаемого из внешнего изображения фрагмента. Они задаются относительно внешнего изображения в пикселах в виде чисел.
Четвертый и пятый параметры определяют ширину и высоту вырезаемого из внешнего изображения фрагмента. Они также задаются относительно внешнего изображения в пикселах в виде чисел.
Шестой и седьмой параметры определяют координаты точки канвы, где должен находиться верхний левый угол выводимого фрагмента внешнего изображения. Они задаются относительно канвы в пикселах в виде чисел.
Восьмой и девятый параметры определяют ширину и высоту выводимого фрагмента внешнего изображения в пикселах в виде чисел.
Вот Web-сценарий, который вырезает из загруженного ранее изображения фрагмент с верхним левым углом в точке [20,40], шириной 40 и высотой 20 пикселов и выводит этот фрагмент на канву, растягивая его так, чтобы занять канву целиком:
ctxCanvas.drawImage(imgSample, 20, 40, 40, 20, 0, 0, 400, 300);
Все приведенные ранее примеры подразумевают, что файл, хранящий внешнее изображение, загружается очень быстро (так может случиться, если файл имеет небольшие размеры или уже находится в кэше Web-обозревателя.) Но чаще всего случается так, что файл не успевает загрузиться к тому моменту, когда начнет выполняться выводящий его на канву код, и мы получим ошибку выполнения Web- сценария. Как избежать этого?
Очень просто. Объект Image поддерживает событие onload, возникающее после окончания загрузки изображения. Данному событию соответствует одноименное свойство, которому следует присвоить функцию — обработчик этого события. Web-сценарий из листинга 22.11 иллюстрирует сказанное.
Листинг 22.11
var imgSample = new Image();
function imgOnLoad() {
ctxCanvas.drawImage(imgSample, 20, 40, 40, 20, 0, 0, 400, 300);
}
imgSample.src = "someimage.jpg";
imgSample.onload = imgOnLoad;
НА ЗАМЕТКУ
Именно так выполняется привязка обработчиков к событиям некоторых объектов Web- обозревателя — присваиванием функции-обработчика свойству, которое соответствует нужному событию. Можно ли использовать для этого методы библиотеки Ext Core, автор не проверял.
Создание тени у рисуемой графики
Еще канва позволяет создавать тень у всех рисуемых фигур. Для задания ее параметров применяют четыре свойства, которые мы сейчас рассмотрим.
Свойства shadowOffsetX и shadowOffsetY задают смещение тени, соответственно, по горизонтали и вертикали относительно фигуры в пикселах в виде чисел. Положительные значения смещают тень вправо и вниз, а отрицательные — влево и вверх. Значения этих свойств по умолчанию — 0, т. е. фактически отсутствие тени.
Пример:
ctxCanvas.shadowOffsetX = 2;
ctxCanvas.shadowOffsetY = -2;
Свойство shadowBlur задает степень размытия тени в виде числа. Чем больше это число, тем более размыта тень. Значение по умолчанию — 0, т. е. отсутствие размытия.
Пример:
ctxCanvas.shadowBlur = 4;
Свойство shadowColor задает цвет тени. Цвет задается в виде строки в любом из форматов, описанных в начале этой главы. Значение по умолчанию — черный непрозрачный цвет.
Пример:
ctxCanvas.shadowColor = "rgba(128, 128, 128, 0.5)";
После того как мы зададим параметры тени, они будут применяться ко всей графике, которую мы далее нарисуем. На параметры тени уже нарисованной графики они влияния не окажут.
Пример:
ctxCanvas.fillText("Двое: я и моя тень.", 150, 50);
Преобразования системы координат
Преобразования — это различные действия (изменение масштаба, поворот и перемещение точки начала координат), которые мы можем выполнить над системой координат канвы.
При выполнении преобразования изменяется только система координат канвы. Рисуемая после этого графика будет создаваться в измененной системе координат; а нарисованная графика остается неизменной.
Сохранение и загрузка состояния
Первое, что нам нужно рассмотреть применительно к преобразованиям, — сохранение и загрузка состояния канвы. Эти возможности нам очень пригодятся в дальнейшем.
При сохранении состояния канвы сохраняются:
— все заданные трансформации (будут описаны далее);
— значения свойств globalAlpha, globalCompositeOperation (будет описано далее), fillStyle, lineCap, lineJoin, lineWidth, miterLimit и strokeStyle;
— все заданные маски (будут описаны далее).
Сохранение состояния канвы выполняет метод save. Он не принимает параметров и не возвращает результата.
Состояние канвы сохраняется в памяти компьютера и впоследствии может быть восстановлено. Более того, сохранять состояние канвы можно несколько раз; при этом все предыдущие состояния остаются в памяти и их также можно восстановить.
Восстановить сохраненное ранее состояние можно вызовом метода restore. Он не принимает параметров и не возвращает результата.
При вызове этого метода будет восстановлено самое последнее из сохраненных состояний канвы. При последующем его вызове будет восстановлено предпоследнее сохраненное состояние и т. д. Этой особенностью часто пользуются для создания сложной графики.
