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

В третьей части статьи о канве HTML 5 мы расскажем о том, как осуществлять заливку канвы сплошным и градиентным цветами.


9. Задание цвета линий контура и заливок
Было бы странно, если бы канва не предоставляла средств для указания цвета линий и заливок. Разумеется, она позволяет это сделать! Причём поддерживаются как сплошные, так и градиентные цвета. А ещё мы можем использовать в качестве цвета любое графическое изображение!

9.1. Свойства strokeStyle и fillStyle объекта CanvasRenderingContext2D
Для указания цвета линий контуров применяется свойство strokeStyle объекта CanvasRenderingContext2D. Оно принимает значение цвета в одном из форматов, описанных далее.

ctx1.strokeStyle = "red";

Это выражение задаёт для цвета линий контура красный цвет.

Чтобы указать цвет заливки, мы используем свойство fillStyle объекта CanvasRenderingContext2D. Оно поддерживает значения цветов тех же форматов, что и свойство strokeStyle.

ctx1.fillStyle = "blue";

Это выражение задаёт для заливок синий цвет.

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

По умолчанию линии контура и заливки имеют чёрный цвет.

Примечание:
Нельзя присваивать значение свойства strokeStyle свойству fillStyle и наоборот - это может вызвать ошибку в Web-сценарии.

Теперь рассмотрим форматы, в которых задаются значения цветов различных разновидностей.

9.2. Задание сплошного цвета
Сплошной цвет закрашивает все точки контура или заливки фигуры в один и тот же цвет. Это самая простая из разновидностей цветов, поддерживаемых канвой HTML 5.

Значение сплошного цвета представляет собой строку, записанную в одном из перечисленных ниже форматов. Эта строка присваивается свойству strokeStyle или fillStyle объекта CanvasRenderingContext2D.

Всего форматов, в которых записывается значение сплошного цвета, четыре.

• Строка с именем цвета, заданным по правилам CSS.
  
  

  ctx1.strokeStyle = "red";

• Строка со значением цвета в формате #RRGGBB, где BB - шестнадцатиричное число, представляющее долю красной составляющей в цвете, RR - зелёной, а BB - синей.
  
  

  ctx1.strokeStyle = "#FF0000";

• Строка со значением цвета в формате RGB такого вида:
  
  

  rgb(
  
    доля красной составляющей,
  
    доля зелёная составляющей,
  
    доля синей составляющей
  
  )

  ей,
  доля синей составляющей
  )[/code]
  
  Доли красной, зелёной и синей составляющих цвета представляют собой десятичные числа от 0 до 255.
  
  [code]ctx1.strokeStyle = "rgb(255, 0, 0)";[/code]

• Строка со значением цвета в формате RGBA такого вида:
  
  [code]rgb(
  доля красной составляющей,
  доля зелёная составляющей,
  доля синей составляющей,
  уровень прозрачности
  )[/code]
  
  Доли красной, зелёной и синей составляющих цвета представляют собой десятичные числа от 0 до 255. Уровень прозрачности представляет собой число с плавающей точкой от 0.0 (полностью прозрачный цвет) до 1.0 (полностью непрозрачный цвет).
  
  [code]ctx1.strokeStyle = "rgba(255, 0, 0, 1.0)";[/code]

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

[code]ctx1.strokeStyle = "rgba(0, 255, 0, 0.5)";[/code]

А это выражение задаёт для линий контура полупрозрачный зелёный цвет.

9.3. Задание линейного градиентного цвета
В линейном градиентном цвете, или линейном градиенте, один сплошной цвет плавно перетекает в другой при движении по прямой линии. Пример линейного градиентного цвета - окраска заголовка окна в Windows 2000 и более поздних версиях Windows при выборе классической темы; там синий цвет плавно перетекает в белый.

Линейный градиентный цвет создаётся в три этапа.

Первый этап - собственно создание линейного градиента. Оно выполняется вызовом метода createLinearGradient объекта CanvasRenderingContext2D. Формат вызова этого метода таков:

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

Метод createLinearGradient возвращает экземпляр объекта CanvasGradient, представляющий созданный нами градиент. Нам следует сохранить этот экземпляр в переменной, так как процесс создания градиента ещё не закончен.

[code]var lg1 = ctx1.createLinearGradient(0, 150, 400, 150);[/code]
Это выражение создаёт линейный градиент, "распространяющийся" вдоль линии, которая идёт по горизонтали по середине канвы.

Второй этап - задание ключевых точек, указывающих позиции в градиенте, где будет присутствовать сплошной цвет. Это выполняется с помощью вызова метода addColorStop объекта CanvasGradient. Вот формат его вызова:

[code]градиент.addColorStop(
положение ключевой точки,
цвет
);[/code]
Первый параметр указывает относительное положение создаваемой ключевой точки на воображаемой прямой, по которой "распространяется" градиент, в виде числа от 0.0 (начало прямой) до 1.0 (конец прямой). Второй параметр задаёт цвет, который должен присутствовать в данной ключевой точке, в виде строки; при этом допустимы все форматы описания цвета, перечисленные в параграфе 9.1.

Метод addColorStop не возвращает значения.

[code]lg1.addColorStop(0, "#FF0000");
lg1.addColorStop(0.5, "yellow");
lg1.addColorStop(1, "rgb(0, 0, 255)");[/code]
Этот код задаёт для созданного нами градиента три ключевые точки:

• первую - в начале градиента, красный цвет;
• вторую - в середине градиента, жёлтый цвет;
• третью - в конце градиента, синий цвет.

Третий этап - собственно использование готового линейного градиента. Для этого представляющий его экземпляр объекта CanvasGradient следует присвоить свойству strokeStyle или fillStyle объекта CanvasRenderingContext2D. Первое свойство, как мы помним, задает цвет линий контуров, а второе — цвет заливок.

[code]ctx1.fillStyle = lg1;[/code]
Это выражение задаст для цвета заливок будущих фигур созданный нами линейный градиент.

А теперь на примере только что созданного градиента рассмотрим один важный вопрос. Предположим, что мы нарисовали на канве три прямоугольника: первый - в начале градиента, второй - в его середине, а третий - в его конце. То есть мы "расставили" эти прямоугольники во всех ключевых точках градиента. Что мы получим в результате? А вот что...

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

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

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

[code]var lg1 = ctx1.createLinearGradient(100, 50, 200, 250);
lg1.addColorStop(0, "#FF0000");
lg1.addColorStop(0.5, "yellow");
lg1.addColorStop(1, "rgb(0, 0, 255)");
ctx1.fillStyle = lg1;
ctx1.fillRect(100, 50, 200, 250);[/code]
Этот градиент "распространяется" по прямой, расположенной по диагонали относительно канвы.

9.4. Задание радиального градиентного цвета
В радиальном градиентном цвете, или радиальном градиенте, один сплошной цвет плавно перетекает в другой при движении из точки, расположенной на воображаемой окружности, к точке, расположенной на другой воображаемой окружности, большей, чем первая. Можно сказать, что первая ключевая точка такого градиента располагается на первой (внутренней) окружности, последняя - на второй (внешней), а промежуточные ключевые точки располагаются на прямой, протянувшейся между центрами этих окружностей.

Радиальный градиентный цвет также создаётся в три этапа.

Первый этап - собственно создание радиального градиента, для чего применяется метод createRadialGradient объекта CanvasRenderingContext2D:

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

Метод createRadialGradient возвращает экземпляр объекта CanvasGradient, представляющий созданный нами радиальный градиент.

[code]var rg1 = ctx1.createRadialGradient(100, 100, 10, 200, 150, 150);[/code]
Это выражение создаёт радиальный градиент. Отметим, что центры окружностей, описывающих его, не совпадают; такой градиент выглядит весьма эффектно.

Второй этап - задание ключевых точек. Это выполняется с помощью знакомого нам метода addColorStop объекта CanvasGradient.

[code]rg1.addColorStop(0, "green");
rg1.addColorStop(0.7, "#CCCCCC");
rg1.addColorStop(1, "rgb(255, 0, 0)");[/code]
Этот код создаёт радиальный градиент с тремя ключевыми точками:

• первую - в начале градиента, зелёный цвет;
• вторую - в точке, отстоящей на 70% расстояния между окружностями, серый цвет;
• третью - в конце градиента, красный цвет.

Третий этап - использование готового радиального градиента. Он выполняется так же, как и в случае линейного градиента (см. выше).

[code]ctx1.fillStyle = rg1;[/code]
Радиальный градиент ведет себя точно так же, как линейный - закрепляется на канве и частично "проявляется" на фигурах, к которым применен.

[code]var rg1 = ctx1.createRadialGradient(100, 100, 10, 200, 150, 150);
rg1.addColorStop(0, "green");
rg1.addColorStop(0.7, "#CCCCCC");
rg1.addColorStop(1, "rgb(255, 0, 0)");
ctx1.fillStyle = rg1;
ctx1.beginPath();
ctx1.moveTo(200, 0);
ctx1.lineTo(0, 300);
ctx1.lineTo(400, 300);
ctx1.closePath();
ctx1.fill();[/code]
Этот код рисует равносторонний треугольник и заполняет его радиальным градиентом.

9.5. Задание графического цвета
Графический цвет - это обычное графическое изображение или содержимое другой канвы, использованное для закраски линий контура или заливки фигур. Да-да, канва HTML 5 позволяет сделать и такое!

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

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

Графический цвет создаётся в три этапа. Бог любит троицу, разработчики веб-стандартов, похоже, тоже...

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

• Если мы собираемся превратить в графический цвет изображение, уже помещённое на веб-страницу с помощью тега <IMG>, загружать файл, где оно хранится, нам не нужно. Веб-браузер, встретив тег <IMG> в HTML-коде веб-страницы, сам загрузит этот файл.
• Если же это изображение не присутствует на веб-странице, для загрузки файла, в котором оно хранится, нам придётся выполнить дополнительные действия.
  
  Графическое изображение, не помещённое на веб-страницу, а загруженное из файла программно, представляется в виде экземпляра объекта Image. Если мы хотим загрузить из файла изображение, нам придётся создать экземпляр данного объекта, который будет его представлять. Делается это с помощью оператора создания нового экземпляра объекта new:
  
  [code]var img1 = new Image();[/code]
  
  Объект Image поддерживает свойство src, с помощью которого задаётся интернет-адрес загружаемого файла в виде строки. Как только мы присвоим этот интернет-адрес свойству src, веб-браузер начнёт загрузку соответствующего файла.
  
  [code]img1.src = "pattern.jpg";[/code]

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

Выход - поместить весь код, выполняющий создание графического цвета и рисование с его помощью, в обработчик события load изображения. Это событие возникает по окончанию загрузки хранящего его файла.

Ниже приведены два примера реализации такого подхода:

[code]var img1 = new Image();
img1.src = "pattern.jpg";
img1.addEventListener("load",
function ()
{
//Код, выполняющий создание графического цвета на основе
//загруженного изображения и рисование с его использованием
}, false);[/code]
[code]<IMG ID="img1" SRC="pattern.jpg">
. . .
<SCRIPT>
var oImg1 = document.getElementById("img1");
oImg1.addEventListener("load",
function ()
{
//Код, выполняющий создание графического цвета на основе
//загруженного изображения и рисование с его использованием
}, false);
</SCRIPT>[/code]
Не забываем, что все последующие этапы создания и использования графического цвета выполняются в теле функции-обработчика события load изображения.

Второй этап - создание графического цвета. Выполняется это с помощью метода createPattern объекта CanvasRenderingContext2D:

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

• Изображение, помещённое на веб-страницу, представляет экземпляр объекта HTMLImageElement.
• Изображение, загруженное программно, представляет экземпляр объекта Image. Это мы уже знаем.
• Канву представляет экземпляр объекта HTMLCanvasElement.

Получить этот экземпляр, как мы уже знаем, можно вызовом метода getElementById.

Часто бывает так, что размеры заданного изображения или другой канвы меньше, чем нашей канвы. В этом случае изображение повторяется столько раз, чтобы полностью её "вымостить". Режим такого повторения задаёт второй параметр метода createPattern. Его значение должно быть одной из следующих строк:

• "repeat" — изображение будет повторяться по горизонтали и вертикали;
• "repeat-x" — изображение будет повторяться только по горизонтали;
• "repeat-y" — изображение будет повторяться только по вертикали;
• "no-repeat" — изображение не будет повторяться никогда; в этом случае часть канвы останется не занятой им.

Метод createPattern возвращает экземпляр объекта CanvasPattern, представляющий созданный нами графический цвет.

[code]var cp1 = ctx1.createPattern(img1, "repeat");[/code]
Этот код загружает изображение из файла pattern.jpg и превращает его в графический цвет. При этом, если изображение окажется по размерам меньше канвы, оно будет повторяться по горизонтали и вертикали, чтобы "вымостить" её полностью.

[code]var cp1 = ctx1.createPattern(img1, "no-repeat");[/code]
А в этом случае изображение повторяться не будет.

[code]<CANVAS ID="can2" WIDTH="200" HEIGHT="200"></CANVAS>
. . .
<SCRIPT>
var oCan2 = document.getElementById("can2");
var cp3 = ctx1.createPattern(oCan2, "repeat");
. . .
</SCRIPT>[/code]
Здесь мы создали графический цвет на основе содержимого другой канвы.

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

[code]ctx1.fillStyle = cp1;[/code]
Графический цвет ведет себя так же, как градиент - закрепляется на канве и частично "проявляется" на фигурах, к которым применен.

[code]var img1 = new Image();
img1.src = "pattern.jpg";
img1.addEventListener("load",
function ()
{
var cp1 = ctx1.createPattern(img1, "repeat");
ctx1.fillStyle = cp1;
ctx1.beginPath();
ctx1.moveTo(200, 0);
ctx1.lineTo(0, 300);
ctx1.lineTo(400, 300);
ctx1.closePath();
ctx1.fill();
}, false);[/code]
Этот код рисует равносторонний треугольник и закрашивает его графическим цветом.


Дополнительные материалы

• Описание объекта Image на Web-сайте MSDN.
• Описание метода addEventListener на Web-сайте MSDN.
• Описание события load на Web-сайте MSDN.

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