Листинг 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";

Увеличиваем масштаб системы координат канвы:

ctx.scale(2, 1.3);

Отметим, что масштаб у горизонтальной оси координат больше, чем у вертикальной, — значит, текст будет растянут по горизонтали.

Выводим текст "Справочник по HTML и CSS" в виде заливки без контура:

ctx.fillText("Справочник по HTML и CSS", cnvWidth / 2, 60 / 1.3, cnvWidth / 2);

Отметим несколько моментов.

— В качестве горизонтальной координаты вывода текста мы указали ширину канвы. Если учесть, что ранее мы задали горизонтальное выравнивание по правому краю, текст будет выровнен по правому краю канвы.

— В качестве вертикальной координаты вывода текста мы указали позицию, на которой находится уже нарисованная нами горизонтальная линия. Если учесть, что мы ранее задали вертикальное выравнивание по нижнему краю символов, получится так, что текст будет находиться выше этой линии; таким образом, линия подчеркнет текст.

— Мы указали максимальную ширину выводимого текста, равной ширине канвы. Благодаря этому текст при любом изменении ширины окна Web-обозревателя не вылезет за края канвы (подробнее см. в разделе, посвященном выводу текста).

— Вероятно, это самый важный момент. Текст мы вывели после изменения масштаба системы координат, но значения координат, которые указали при выводе, принадлежат старой системе координат. Чтобы преобразовать их в новой системе координат, мы разделим их на соответствующие величины масштабов (2 и 1,3).

Выполнение функции drawHeader закончено.

Откроем Web-страницу в Web-обозревателе. Посмотрим на новый логотип. Конечно, если постараться, можно сделать и лучше. Пусть это будет вашим домашним заданием.

На этом автор прощается с вами. Счастливо вам доделать Web-сайт — справочник по HTML и CSS! И успехов на поприще современного Web-дизайна!

Заключение

Вот и закончилась эта книга…

Программное ядро (или, на жаргоне программистов, "движок") нашего Web- сайта — справочника по HTML и CSS — готово и отлажено. Осталось только создать остальные Web-страницы, описывающие многочисленные теги HTML, атрибуты стиля CSS и примеры их использования. Мы ведь их так и не написали, увлекшись Web-дизайном и Web-программированием…

Мы познакомились с азами Web-дизайна, языками HTML, CSS и JavaScript, принципами Web-программирования и библиотекой Ext Core. И не только познакомились, но и применили полученные знания на практике, создав Web-сайт. Наш проект, хоть и невелик по объему, но зато использует самые "горячие" новинки Web- дизайна и Web-программирования. Подгружаемое и генерируемое содержимое, базы данных, семантическая разметка, интерактивные элементы — такое не везде встретишь.

А еще мы активно применяли новинки, которые несут нам HTML 5 и CSS 3. Многие Web-обозреватели уже сейчас поддерживают некоторые нововведения этих версий, а вскоре станут поддерживать и остальные их возможности. Ведь время идет, "черновые" стандарты становятся окончательными, а разработчики создают новые программы, которые будут поддерживать эти стандарты.

Конечно, не все было описано в этой книге. Многое осталось нерассмотренным. Но ведь окончательные редакции стандартов HTML 5 и CSS 3 еще далеки от завершения, да и Web-обозревателей, полностью соответствующих даже их "черновым" редакциям, также пока нет. Автор просто описал то, что, по его скромному мнению, понадобится даже неопытным Web-дизайнерам, и пригодится уже сейчас. А все прочее…

А все прочее описано в других материалах, которых хватает в Интернете. В табл. З.1 приведены интернет-адреса некоторых Web-сайтов, которые будут очень полезны Web-дизайнеру любого уровня подготовки и которыми пользовался сам автор при написании этой книги. Правда, все они на английском языке, но этот язык должен знать любой грамотный компьютерщик — вопрос даже не обсуждается!

Таблица 3.1. Некоторые Web-сайты с материалами по теме книги

Вот теперь действительно все! До свидания!

Владимир Дронов