Тег CANVAS: рисование на веб-странице (ч.4)

10. Задание толщины и других параметров линий контура
По умолчанию все контуры рисуются линиями толщиной в 1 пиксел. Однако мы можем указать для них другую толщину, а также задать другие их параметры.

Для задания толщины линий контуров используется свойство lineWidth объекта CanvasRenderingContext2D. Значение толщины должно быть указано в виде числа в пикселах.

ctx1.lineWidth = 10;

ctx1.strokeStyle = "black";

ctx1.fillRect(100, 100, 300, 200);

Этот код рисует прямоугольник, линии контура которого имеют толщину в 10 пикселов.

Свойство lineCap объекта CanvasRenderingContext2D позволяет задать форму начальных и конечных точек линий. Его значение может быть одной из следующих строк:

• "butt" — начальная и конечная точки как таковые отсутствуют (значение по умолчанию);
• "round" — начальная и конечная точки имеют вид кружков;
• "square" — начальная и конечная точки имеют вид квадратиков.

ctx1.lineWidth = 10;

ctx1.lineCap = "round";

ctx1.beginPath();

ctx1.moveTo(20, 20);

ctx1.lineTo(180, 280);

ctx1.stroke();

Этот код рисует толстую линию, начальная и конечная точки которой имеют вид кружков.

Свойство lineJoin объекта CanvasRenderingContext2D задаёт форму точек, в которых линии соединяются друг с другом. Его значение может быть одной из следующих строк:

• "miter" — точки соединения имеют вид острого или тупого угла (значение по умолчанию);
• "round" — точки соединения, образующие острые углы, скругляются;
• "bevel" — острые углы, образуемые соединяющимися линиями, как бы срезаются.

ctx1.lineWidth = 10;

ctx1.lineJoin = "bevel";

ctx1.beginPath();

ctx1.moveTo(200, 0);

ctx1.lineTo(0, 300);

ctx1.lineTo(400, 300);

ctx1.closePath();

ctx1.stroke();

Этот код рисует контур равностороннего треугольника толстыми линиями; точки соединения этих линий, образующие острые углы, будут срезаться.

Свойство miterLimit объекта CanvasRenderingContext2D задаёт дистанцию, на которую могут выступать острые углы, образованные соединением линий, от точки соединения, когда для свойства lineJoin задано значение "miter". Углы, выступающие на большую дистанцию, будут срезаны.

Значение этого свойства задается в пикселах в виде числа. Значение по умолчанию - 10 пикселов.

ctx1.lineJoin = "miter";

ctx1.miterLimit = 2;

11. Вывод текста
Мы имеем возможность вывести на канву произвольный текст, сделав его частью присутствующей там графики. Сейчас мы рассмотрим, как это делается.

Для вывода текста в виде контура без заливки используется метод strokeText объекта CanvasRenderingContext2D:

контекст рисования.strokeText(

  выводимый текст,

  горизонтальная координата,

  вертикальная координата[,

  максимальная ширина текста]

);

ината,
вертикальная координата[,
максимальная ширина текста]
);[/code]
Выводимый текст задаётся в виде строки. Вторым и третьим параметрами задаются, соответственно, горизонтальная и вертикальная координата точки, в которой будет выведен текст. По умолчанию текст выводится выравненным по левому краю относительно этой точки.

Четвёртый, необязательный, параметр задаёт максимальное значение ширины, которую может принять выводимый на канву текст. Если ширина выводимого текст получается большей, чем указано, веб-браузер выведет его либо шрифтом с уменьшенной шириной символов (если данный шрифт поддерживает такое начертание), либо шрифтом меньшего размера.

Метод strokeText не возвращает результата.

[code]ctx1.strokeStyle = "green";
ctx1.strokeText("Hello world!", 0, 50, 100);[/code]
Мы также имеем возможность вывести текст в виде одной только заливки без контура. Для этого применяется метод fillText объекта CanvasRenderingContext2D.

[code]контекст рисования.fillText(
выводимый текст,
горизонтальная координата,
вертикальная координата[,
максимальная ширина текста]
);[/code]
Как видим, этот метод принимает такие же параметры, как и метод strokeText. Результата он тоже не возвращает.

[code]ctx1.fillStyle = "red";
ctx1.fillText("Goodbye world!", 0, 150);[/code]
Для указания параметров - названия, размера и начертания - шрифта текста применяется свойство font объекта CanvasRenderingContext2D. Эти параметры записываются в виде строки в следующем формате:

[code]"начертание
[вид строчных букв]
["жирность"]
размер шрифта
имя шрифта
"[/code]

Имя шрифта может быть как одно, так и сразу несколько; в таком случае имена шрифтов отделяются друг от друга запятыми. Если веб-браузер не найдёт на компьютере первый из перечисленных шрифтов, он начнёт искать второй, потом - третий и т. д. Это, кстати, единственный параметр шрифта, который обязательно должен здесь присутствовать; остальные параметры необязательны.

Размер шрифта может быть указаны в любой единице измерения, поддерживаемой стандартом CSS. Так, значение 12pt обозначает размер шрифта в 12 пунктов, значение 20px - в 20 пикселов, значение 150% - размер, в полтора раза больший, чем размер по умолчанию, а значение 2 - вдвое больший, чем размер по умолчанию.

"Жирность" шрифта обозначается:

• либо значениями от 100 (минимальная "жирность") до 900 (максимальная "жирность");
• либо значениями normal (обычный шрифт) и bold (стандартный полужирный шрифт);
• либо значениями lighter (шрифт, менее "жирный", чем шрифт по умолчанию) и bolder (шрифт, более "жирный", чем шрифт по умолчанию).

Вид строчных (маленьких) букв обозначается значениями normal (обычные строчные буквы) или small-caps (строчные буквы выглядят как уменьшенные прописные, то есть большие, буквы).

Начертание символов обозначается значениями normal (обычное начертание), italic (курсивное начертание) или oblique (декоративное начертание, похожее на курсивное).

[code]ctx1.strokeStyle = "green";
ctx1.font = "italic bold 10pt Verdana";
ctx1.strokeText("Hello world!", 0, 50, 100);[/code]
Свойство textAlign объекта CanvasRenderingContext2D задаёт горизонтальное выравнивание текста относительно точки, в которой он будет выведен (координаты этой точки задаются вторым и третьим параметрами методов strokeText и fillText). Это свойство может принимать следующие значения:

• "left" — выравнивание по левому краю;
• "right" — выравнивание по правому краю;
• "start" — выравнивание по левому краю, если текст выводится по направлению слева направо, и по правому краю в противном случае (значение по умолчанию);
• "end" — выравнивание по правому краю, если текст выводится по направлению слева направо, и по левому краю в противном случае;
• "center" — выравнивание по центру.

[code]ctx1.strokeStyle = "green";
ctx1.textAlign = "center";
ctx1.strokeText("Hello world!", 100, 50);[/code]
Свойство textBaseline объекта CanvasRenderingContext2D позволяет указать вертикальное выравнивание выводимого текста относительно точки, в которой он будет выведен. Оно может принимать такие значения:

• "top" — выравнивание по верху прописных (больших) букв;
• "hanging" — выравнивание по верху строчных (маленьких) букв;
• "middle" — выравнивание по середине строчных букв;
• "alphabetic" — выравнивание по базовой линии букв европейских алфавитов (значение по умолчанию);
• "ideographic" — выравнивание по базовой линии иероглифических символов (она находится чуть ниже базовой линии букв европейских алфавитов);
• "bottom" — выравнивание по низу букв.

[code]ctx1.strokeStyle = "green";
ctx1.textAlign = "center";
ctx1.textBaseline = "top";
ctx1.strokeText("Hello world!", 100, 50);[/code]

12. Вывод внешних изображений
Внешним по отношению к содержимому канвы является изображение:

• программно загруженное из файла (как это сделать, было описано в параграфе 9.4);
• помещённое на веб-страницу с помощью тега <IMG>;
• представляющее собой содержимое другой канвы.

Канва предоставляет нам довольно мощные средства для вывода внешних изображений. Мы можем вывести это изображение как есть, вывести, изменив при этом его размеры, и даже вывести отдельную его часть.

Примечание:
Теоретически Internet Explorer 9 позволяет выводить в канву произвольный кадр видеоролика, помещённого на веб-страницу с помощью тега <VIDEO>. Но, как и в случае с графическим цветом, функция эта толком не работает, по крайней мере, на данный момент.

Как и в случае с графическим цветом, код, выводящий внешнее изображение, что загружается программно из файла или берётся из тега <IMG>, следует помещать в обработчик события load этого изображения. Так мы будем уверены, что на момент вывода изображения оно будет полностью загружено. Подробнее см. в параграфе 9.4.

Если нам нужно просто вывести на канву внешнее изображение как есть - целиком и без изменения его размеров, - мы вызовем метод drawImage объекта CanvasRenderingContext2D в самом простом его формате:

[code]контекст рисования.drawImage(
экземпляр объекта, представляющий изображение или канву,
горизонтальная координата на канве,
вертикальная координатана на канве
);[/code]
Первым параметром передаётся экземпляр объекта, представляющий изображение или канву. Второй и третий параметры задают координаты точки канвы, где должен находиться верхний левый угол выводимого изображения. Метод drawImage не возвращает результата.

[code]var img1 = new Image();
img1.src = "picture.jpg";
img1.addEventListener("load",
function ()
{
ctx1.drawImage(img1, 0, 0);
}, false);[/code]
Здесь мы программно загружаем изображение из файла picture.jpg и выводим его в верхний левый угол канвы.

[code]<IMG ID="img1" SRC="picture.jpg">
. . .
<SCRIPT>
var oImg1 = document.getElementById("img1");
oImg1.addEventListener("load",
function ()
{
ctx1.drawImage(oImg1, 0, 0);
}, false);
</SCRIPT>[/code]
А здесь мы выводим на канву изображение, уже помещённое на веб-страницу с помощью тега <IMG>.

Если же нам нужно при выводе внешнего изображения на канву изменить его размеры, мы вызовем метод drawImage объекта CanvasRenderingContext2D в следующем формате:

[code]контекст рисования.drawImage(
экземпляр объекта, представляющий изображение или канву,
горизонтальная координата на канве,
вертикальная координатана на канве,
ширина на канве,
высота на канве
);[/code]
Первые три параметра нам уже знакомы. Четвёртый и пятый задают, соответственно, ширину и высоту, которые будет иметь изображение, выведенное на канву.

[code]var img1 = new Image();
img1.src = "picture.jpg";
img1.addEventListener("load",
function ()
{
ctx1.drawImage(img1, 0, 0, 400, 300);
}, false);[/code]
Здесь мы выводим изображение и задаём такие его размеры, чтобы оно полностью заняло канву.

Кстати, при выводе мы можем задать любые ширину и высоту изображения. В результате его пропорции могут исказиться. Иногда это бывает полезно, но чаще всего - не очень.

Ну а если нам понадобится вывести на канву "вырезанный" из изображения прямоугольний фрагмент, возможно, изменив при этом его размеры, мы воспользуемся вот таким форматом вызова метода drawImage объекта CanvasRenderingContext2D:

[code]контекст рисования.drawImage(
экземпляр объекта, представляющий изображение или канву,
горизонтальная координата "вырезаемого" фрагмента,
вертикальная координатана "вырезаемого" фрагмента,
ширина "вырезаемого" фрагмента,
высота "вырезаемого" фрагмента
горизонтальная координата на канве,
вертикальная координата на на канве,
ширина на канве,
высота на канве
);[/code]
Первый параметр нам уже знаком - он задаёт внешнее изображение.

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

Четвёртый и пятый параметры указывают ширину и высоту "вырезаемого" из внешнего изображения фрагмента. Они также задаются относительно внешнего изображения.

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

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

[code]var img1 = new Image();
img1.src = "picture.jpg";
img1.addEventListener("load",
function ()
{
ctx1.drawImage(img1, 500, 300, 400, 300, 0, 0, 400, 300);
}, false);[/code]
Этот код "вырезает" из внешнего изображения фрагмент и выводит его на канву.


13. Создание тени у рисуемой графики
Канва поддерживает создание очень интересного эффекта - тени у любой графики, что мы нарисуем на ней, даже у внешнего изображения. Создать тень чрезвычайно просто; для этого используются четыре свойства объекта CanvasRenderingContext2D, перечисленные ниже.

• shadowOffsetX - задаёт смещение между фигурой и её тенью по горизонтали. Положительное значение определяет смещение вправо, отрицательное - влево.
• shadowOffsetY - задаёт смещение между фигурой и её тенью по вертикали. Положительное значение определяет смещение вниз, отрицательное - вверх.
  Значение по умолчанию обоих этих свойств - 0, то есть тень отсутствует.
• shadowColor - задаёт цвет тени. По умолчанию тень рисуется чёрным цветом.
• shadowBlur - задаёт степень размытия тени. Значение этого свойства представляет собой целое число; чем оно больше, тем сильнее размыта тень. Значение по умолчанию - 0, то есть тень не размыта.

[code]ctx1.shadowOffsetX = 2;
ctx1.shadowOffsetY = 2;
ctx1.shadowColor = "#CCCCCC";
ctx1.shadowBlur = 5;
ctx1.font = "24pt Arial";
ctx1.fillText("Двое: я и моя тень.", 50, 50);[/code]
Этот код выводит на канву надпись с тенью.

Продолжение следует...