HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Создание маски
О масках мы уже знаем из главы 21. В терминологии канвы так называется особая фигура, задающая своего рода "окно", сквозь которое будет видна часть графики, нарисованной на канве. Вся графика, не попадающая в это "окно", будет скрыта. При этом сама маска на канву не выводится.
Маской может быть только сложный контур, рисование которого описано ранее. И создается она примерно так же.
Вот последовательность действий.
1. Рисуем сложный контур, который станет маской.
2. Обязательно делаем его закрытым.
3. Вместо
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";