HTML 5, CSS 3 и Web 2.0. Разработка современных 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 (будет
— все заданные маски (будут описаны далее).
Сохранение состояния канвы выполняет метод save. Он не принимает параметров и не возвращает результата.
Состояние канвы сохраняется в памяти компьютера и впоследствии может быть восстановлено. Более того, сохранять состояние канвы можно несколько раз; при этом все предыдущие состояния остаются в памяти и их также можно восстановить.
Восстановить сохраненное ранее состояние можно вызовом метода restore. Он не принимает параметров и не возвращает результата.
При вызове этого метода будет восстановлено самое последнее из сохраненных состояний канвы. При последующем его вызове будет восстановлено предпоследнее сохраненное состояние и т. д. Этой особенностью часто пользуются для создания сложной графики.
Перемещение начала координат канвы
Мы можем переместить начало координат канвы в любую другую ее точку. После этого все координаты будут отсчитываться от нового начала координат.
Для перемещения начала координат канвы в другую точку достаточно вызвать метод translate:
<контекст рисования>.translate(<горизонтальная координата>,<вертикальная координата>)
Параметры метода translate определяют координаты точки, в которой должно находиться новое начало координат канвы. Они отсчитываются от текущего начала координат, измеряются в пикселах и задаются в виде чисел. Метод не возвращает результата.
При перемещении начала координат канвы будут учитываться все трансформации, примененные к канве ранее. Значит, если мы ранее переместили начало координат в точку [50,50] и теперь снова перемещаем его, уже в точку [100,50], в результате начало координат окажется в точке [150,100], если отсчитывать от верхнего левого угла канвы (начала системы координат по умолчанию).
Листинг 22.12 иллюстрирует пример.
Листинг 22.12
ctxCanvas.save;
ctxCanvas.translate(100, 100);
ctxCanvas.fillRect(0, 0, 50, 50);
ctxCanvas.translate(100, 100);
ctxCanvas.fillRect(0, 0, 50, 50);
ctxCanvas.restore;
ctxCanvas.fillRect(0, 0, 50, 50);
Web-сценарий из листинга 22.12 делает следующее:
1. Сохраняет текущее состояние канвы.
2. Перемещает начало координат в точку [100,100].
3. Рисует квадрат размерами 50 50 пикселов, верхний левый угол которого находится в точке начала координат.
4. Опять перемещает начало координат в точку [100,100]. Обратим внимание, что координаты этой точки теперь отсчитываются от нового начала системы координат, установленного предыдущим вызовом метода translate.
5. Опять рисует квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.