Графический цвет

Графический цвет – это обычное графическое изображение, которым закрашиваются линии или заливки. Таким графическим изображением может быть содержимое как обычного графического файла, так и другой канвы.

Графический цвет создают в три этапа.

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

Сначала с помощью знакомого нам оператора создания экземпляра new нам потребуется создать экземпляр объекта Image:

var imgSample = new Image();

Объект Image поддерживает свойство src, задающее интернет-адрес загружаемого графического файла в виде строки. Если присвоить этому свойству интернет-адрес какого-либо файла, данный файл тотчас будет загружен:

imgSample.src = "graphic_color.jpg";

В дальнейшем мы можем использовать данный экземпляр объекта Image для создания графического цвета.

Второй этап – собственно создание графического цвета с помощью метода createPattern:

<контекст рисования>.createPattent(<графическое изображение или канва>, <режим повторения>)

Первый параметр задает графическое изображение в виде экземпляра объекта Image или канву в виде экземпляра объекта HTMLCanvasElement.

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

• "repeat" – изображение будет повторяться по горизонтали и вертикали;

• "repeat-x" – изображение будет повторяться только по горизонтали;

• "repeat-y" – изображение будет повторяться только по вертикали;

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

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

var cpSample = ctxCanvas.createPattern(imgSample, "repeat");

Третий этап – использование готового графического цвета – выполняется так же, как для градиентов, т. е. присваиванием его свойству strokeStyle или fillStyle.

Пример:

ctxCanvas.fillStyle = cpSample;

ctxCanvas.fillRect(0, 0, 200, 100);

Этот Web-сценарий рисует прямоугольник с заливкой на основе созданного нами ранее графического цвета.

Графический цвет не фиксируется на канве, а полностью применяется к рисуемой фигуре. В этом его принципиальное отличие от градиентов.

НА ЗАМЕТКУ
В приведенном ранее примере мы предположили, что файл graphic_color.jpg имеет небольшие размеры или уже присутствует в кэше Web-обозревателя и поэтому загрузится очень быстро. Но если он, так сказать, "задержится в пути", Web-сценарий не выполнится. Поэтому изображения, хранящиеся в других файлах, выводятся по иной методике, которую мы еще рассмотрим.