— "destination-out" — отображается только та часть старой фигуры, на которую не накладывается новая. Остальные части новой фигуры и вся старая фигура не выводятся;
— "source-atop" — отображается только та часть новой фигуры, которая накладывается на старую; остальная часть новой фигуры не выводится. Старая фигура выводится целиком и находится ниже новой;
— "destination-atop" — отображается только та часть старой фигуры, которая накладывается на новую; остальная часть старой фигуры не выводится. Новая фигура выводится целиком и находится ниже старой;
— "lighter" — цвета накладывающихся частей старой и новой фигур складываются, результирующий цвет получается более светлым, окрашиваются накладывающиеся части фигур;
— "darker" — цвета накладывающихся частей старой и новой фигур вычитаются, в полученный цвет, который получается более темным, окрашиваются накладывающиеся части фигур;
— "xor" — отображаются только те части старой и новой фигур, которые не накладываются друг на друга;
— "copy" — выводится только новая фигура; все старые фигуры удаляются с канвы.
Заданный нами способ наложения графики действует только для графики, которую мы нарисуем после этого. На уже нарисованную графику он влияния не оказывает.
Листинг 22.15 иллюстрирует пример.
Листинг 22.15
ctxCanvas.fillStyle = "blue";
ctxCanvas.fillRect(0, 50, 400, 200);
ctxCanvas.fillStyle = "red";
ctxCanvas.globalCompositeOperation = "source-over";
ctxCanvas.fillRect(100, 0, 200, 300);
Web-сценарий из листинга 22.15 рисует два накладывающихся прямоугольника разных цветов и позволит изучить поведение канвы при разных значениях свойства globalCompositeOperation. Изменяем значение этого свойства, перезагружаем Web-страницу нажатием клавиши <F5> и смотрим, что получится.
Создание маски
О масках мы уже знаем из главы 21. В терминологии канвы так называется особая фигура, задающая своего рода "окно", сквозь которое будет видна часть графики, нарисованной на канве. Вся графика, не попадающая в это "окно", будет скрыта. При этом сама маска на канву не выводится.
Маской может быть только сложный контур, рисование которого описано ранее. И создается она примерно так же.
Вот последовательность действий.
1. Рисуем сложный контур, который станет маской.
2. Обязательно делаем его закрытым.
3. Вместо вызова методов stroke или fill вызываем метод clip, который не принимает параметров и не возвращает результата.
4. Рисуем графику, которая будет находиться под маской.
В результате нарисованная нами на шаге 4 графика будет частично видна сквозь маску. Требуемый результат достигнут.
Листинг 22.16 иллюстрирует пример.
Листинг 22.16
ctxCanvas.beginPath();
ctxCanvas.moveTo(100, 150);
ctxCanvas.lineTo(200, 0);
ctxCanvas.lineTo(200, 300);
ctxCanvas.closePath();
ctxCanvas.clip();
ctxCanvas.fillRect(0, 100, 400, 100);
Web-сценарий из листинга 22.16 сначала рисует маску в виде треугольника, а потом — прямоугольник, часть которого будет видна сквозь маску.
Создание графического логотипа Web-сайта
Вооружившись необходимыми знаниями о канве HTML 5, контексте рисования и его свойствах и методах, давайте попрактикуемся в Web-художествах. Создадим графический логотип для нашего Web-сайта, который поместим в контейнер cheader вместо маловыразительного текстового заголовка.
Сначала сформулируем требования.
— Логотип нашего Web-сайта будет представлять собой подчеркнутую надпись "Справочник по HTML и CSS" с тенью.
— Ширина логотипа будет такой, чтобы занимать все пространство между левым краем контейнера cheader и левым краем Web-формы поиска.
— Ширина логотипа будет меняться при изменении размеров окна Web-обозревателя.
Откроем Web-страницу index.htm в Блокноте, удалим все содержимое контейнера cheader и вставим в него такой HTML-код:
<CANVAS ID="cnv" WIDTH="600" HEIGHT="80"></CANVAS>
Он создает канву cnv, в которой и будет рисоваться логотип.
Так, канва у нас готова. Теперь нам нужно написать Web-сценарий, который будет получать размеры канвы и рисовать в ней логотип таким образом, чтобы он занял канву целиком.
Откроем файл Web-сценария main.js в Блокноте. И подумаем.
Где нам поместить код, выполняющий рисование логотипа? Может быть, в теле функции, передаваемой параметром методу onReady объекта Ext? Тогда логотип будет нарисован всего однажды — после загрузки Web-страницы.
Но мы хотим сделать так, чтобы ширина логотипа менялась при изменении ширины окна Web-обозревателя. Для этого нам следует сделать две вещи. Во-первых, придется в ответ на изменение ширины окна менять размеры канвы cnv — это очевидно. Во-вторых, понадобится после каждого изменения размеров канвы перерисовывать логотип — с учетом изменившихся размеров канвы.
Вывод: поместим код, выполняющий рисование логотипа, в тело функции adjustContainers. Эта функция, как мы помним, устанавливает размеры контейнеров, составляющих дизайн нашей Web-страницы, и выполняется при каждом изменении размеров окна Web-обозревателя — как раз то, что нам нужно.
Поместим в конец тела функции adjustContainers два выражения:
Ext.get("cnv"). set({ width: elCSearch.getX() — 40 });
drawHeader();
Первое выражение устанавливает ширину канвы cnv, чтобы она заняла все пространство между левым краем контейнера cheader и левым краем Web-формы поиска. Нужное значение ширины получается следующим образом.
1. Берется значение горизонтальной координаты свободного контейнера csearch, в котором находится Web-форма поиска (см. главу 21). (Контейнер csearch хранится в переменной elCSearch.) Получается значение ширины, которую может занять канва, без учета внутренних отступов.
2. Из полученной ширины вычитается 20 — размер внутреннего отступа слева в пикселах, заданного в именованном стиле, привязанном к контейнеру cheader.
3. Из полученной разности вычитается еще 20 (итого получается 40) — размер отступа между правым краем канвы и левым краем контейнера csearch с Web- формой поиска. Это нужно, чтобы канва не примыкала к Web-форме поиска вплотную.
Полученное значение ширины присваивается атрибуту WIDTH тега <CANVAS> с помощью метода set объекта Ext Core Element (см. главу 15).
Второе выражение вызывает функцию drawHeader, которая и выполнит рисование логотипа. Листинг 22.17 содержит код, который объявляет эту функцию; мы можем поместить его в любое место файла main.js.
Листинг 22.17
function drawHeader() {
var elCanvas = Ext.get("cnv");
var cnvWidth = elCanvas.getAttribute("width");
var ctx = elCanvas.dom.getContext("2d"); ctx.beginPath();
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke();
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";
ctx.font = "normal 20pt Arial";
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillStyle = "#3B4043";
ctx.scale(2, 1.3);
ctx.fillText("Справочник по HTML и CSS", cnvWidth / 2, 60 / 1.3,
cnvWidth / 2);
}
Рассмотрим листинг 22.17 по частям.
Сначала получаем канву cnv:
var elCanvas = Ext.get("cnv");
Затем получаем текущую ширину канвы:
var cnvWidth = elCanvas.getAttribute("width");
Рисуем горизонтальную линию, которая "вытянется" на всю ширину канвы и подчеркнет текст заголовка, который мы выведем потом:
ctx.beginPath();
ctx.strokeStyle = "#B1BEC6";
ctx.moveTo(0, 60);
ctx.lineTo(cnvWidth, 60);
ctx.stroke();
Задаем параметры тени для текста:
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "#CDD9DB";
Задаем шрифт текста. Берем его параметры из стиля переопределения тега <H1>,
созданного нами в таблице стилей main.css:
ctx.font = "normal 20pt Arial";
Задаем для текста горизонтальное выравнивание по правому краю и вертикальное выравнивание по нижнему краю символов:
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
Так нам будет проще вычислять координаты для вывода текста. Задаем цвет заливки — он станет цветом выводимого текста: ctx.fillStyle = "#3B4043";
Увеличиваем масштаб
