Метод createPattern() размножает заданный элемент в заданном направлении.
В качестве размножаемого элемента можно использовать изображение, видео или другой элемент <canvas>.
Размножаемый элемент может использоваться для рисования/заливки прямоугольников, окружностей, линий и т.д.
| JavaScript синтаксис: | context.createPattern(image,"repeat | repeat-x | repeat-y | no-repeat"); |
Значения параметров
| Параметр | Описание |
|---|---|
| image | Определяет элемент изображения, <canvas> или видео, который будет использоваться в качестве шаблона |
| repeat | Значение по умолчанию. Шаблон размножается как по горизонтали, так и по вертикали |
| repeat-x | Шаблон размножается только по горизонтали |
| repeat-y | Шаблон размножается только по вертикали |
| no-repeat | Шаблон будет отображен только один раз |
Пример использования
Изображение для примера:
Пример
Размножим изображение по горизонтали и вертикали:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
