Графический цвет
Графический цвет — это обычное графическое изображение, которым закрашиваются линии или заливки. Таким графическим изображением может быть содержимое как обычного графического файла, так и другой канвы.
Графический цвет создают в три этапа.
Первый этап необходим только в том случае, если мы используем в качестве цвета содержимое графического файла. Файл нужно как-то загрузить, удобнее всего — с помощью объекта Web-обозревателя Image, который представляет графическое изображение, хранящееся в файле.
Сначала с помощью знакомого нам по главе 14 оператора 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-сценарий не выполнится. Поэтому изображения, хранящиеся в других файлах, выводятся по иной методике, которую мы скоро рассмотрим.
Дата добавления: 2015-05-08; просмотров: 758;