Координатная сетка холста

Холст — это двухмерная сетка, на которой координата (0, 0) присвоена левому верхнему углу. Значения абсцисс (x)растут слева направо, значения ординат (y)— сверху вниз.

Координатная диаграмма на рис. 4.2 изображена с помощью тега <canvas>. В ее состав входят:

множество полупрозрачных вертикальных линий;множество полупрозрачных горизонтальных линий;две черные горизонтальные линии;

две маленькие черные диагональные линии, формирующие стрелку;две черные вертикальные линии;еще две маленькие черные диагональные линии — тоже стрелка;буква x;

буква y;

текст (0, 0) возле верхнего левого угла;текст (500, 375) возле нижнего правого угла;

точки в левом верхнем и правом нижнем углах.

Рис. 4.2. Диаграмма координат холста

Рассмотрим, как изобразить такую составную фигуру.

Сначала нужно задать собственно тег <canvas>. В нем будут определены ширина и высота прямоугольника, а также атрибут id:

<canvas id="c" width="500" height="375"></canvas>

Затем надо найти в DOM тег <canvas> и получить доступ к его контексту рисования:

var c_canvas = document.getElementById("c"); var context = c_canvas.getContext("2d");

Только после этого следует приступить к рисованию линий.

Контуры

В табл. 4.3 перечислены браузеры, в которых поддерживаются контуры.

Таблица 4.3. Браузеры с поддержкой контуров

*В Internet Explorer поддержку обеспечивает сторонняя библиотека ExplorerCanvas.

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

Для каждого холста определен контур. Формирование контура подобно карандашному эскизу: рисовать можно что угодно, но частью конечного продукта наш «эскиз» не станет до тех пор, пока мы не прорисуем его условными «чернилами».

Рисовать прямые линии «карандашом» позволяют следующие два метода:moveTo(x, y) передвигает «карандаш» в заданную начальную точку;

lineTo(x, y) проводит линию до заданной конечной точки.

При вызовах moveTo() и lineTo() от раза к разу контур все увеличивается. Эти методыпосути«карандашные»,хотявообщеихможноназыватькакугодно.На холсте ничего не появится, если не вызвать один из «чернильных» методов.

Сформируем сначала координатную сетку:

for (var x = 0.5; x < 500; x += 10) { context.moveTo(x, 0); context.lineTo(x, 375);

}

for (var y = 0.5; y < 375; y += 10) { context.moveTo(0, y); context.lineTo(500, y);

}

До сих пор вызывались только «карандашные» методы и на самом холсте ничего не появилось. Чтобы закрепить эскиз, требуются «чернила»:

context.strokeStyle = "#eee"; context.stroke();

Метод stroke() — один из «чернильных» методов. Он принимает тот сложный контур, который программист определил с помощью moveTo() и lineTo(), и прори-

context.moveTo(60, 0); context.lineTo(60, 153); context.moveTo(60, 173); context.lineTo(60, 375); context.moveTo(65, 370); context.lineTo(60, 375); context.lineTo(55, 370);

Как я сказал, стрелки будут черного цвета, но свойство strokeStyle пока еще определяет светло-серый цвет (при создании нового контура значения fillStyle и strokeStyle не возвращаются к начальным). Это не составляет проблемы, потому что до сих пор вызывались только «карандашные» методы. Прежде чем прорисовывать контур по-настоящему, «чернилами», зададим в свойстве strokeStyle значение черного цвета, иначе стрелки окажутся почти невидимыми:

context.strokeStyle = "#000"; context.stroke();

Результат можно видеть на рис. 4.4.

Рис. 4.4. Координатные оси (без ярлыков) на холсте

Текст

На холсте можно рисовать не только линии, но и текст (табл. 4.4). В отличие от окружающего текста веб-страницы, текст на холсте не подчиняется «блочной» модели, то есть к нему неприменимы известные технологии CSS-форматирования: плавающая разметка, поля, отступы и перенос по словам (это и к лучшему, как вы могли бы подумать). Можно установить некоторые атрибуты шрифта, после чего выбирается точка на холсте и прорисовывается текст.

*В Internet Explorer поддержку обеспечивает сторонняя библиотека ExplorerCanvas.

**В Mozilla Firefox 3.0 для обеспечения поддержки нужен пакет совместимости.

Вконтексте рисования (см. раздел «Простые фигуры» этой главы) доступны следующие атрибуты шрифта:

font — все, что позволяет определить одноименное CSS-правило: стиль, вариант, начертание, размер, интерлиньяж и семейство шрифтов;

textAlign — задает выравнивание текста, подобно CSS-правилу text-align, но не точно так же; возможные значения этого свойства: start, end, left, right, center;

textBaseline — определяет положение текста относительно начальной точки;

возможные значения этого свойства: top, hanging, middle, alphabetic, ideographic, bottom.

Свойство textBaseline непростое, потому что непрост и сам текст (английский текст, как и русский, достаточно прост, но на холст можно вывести любой символ Unicode, а там простота заканчивается). Спецификация HTML5 так описывает различные базовые линии текста1:

Верх и низ em-квадрата — это приблизительные верхняя и нижняя границы символов шрифта.. Строго посередине между ними проводится средняя линия.. К «висячей» базовой линии прикрепляются такие символы, как ; к «алфавитной» базовой линии — такие символы, как , , f и; к «идеографической» базовой линии — такие символы, как и.. По вине символов, далеко выходящих за границы em-квадратов (рис. 4..5), верхний и нижний края ограничива­ ющего блока могут находиться далеко от базовых линий..

Рис. 4.5. Базовые линии текста

Для таких простых алфавитов, как английский и русский, можно ограничиться значениями top, middle и bottom свойства textBaseline.

1http://bit.ly/aHCdDO. — Примеч. авт.