Javascript метод createPattern()

Метод createPattern() размножает заданный элемент в заданном направлении.

В качестве размножаемого элемента можно использовать изображение, видео или другой элемент <canvas>.

Размножаемый элемент может использоваться для рисования/заливки прямоугольников, окружностей, линий и т.д.

JavaScript синтаксис: context.createPattern(image,"repeat | repeat-x | repeat-y | no-repeat");

Значения параметров

Параметр Описание
image Определяет элемент изображения, <canvas> или видео, который будет использоваться в качестве шаблона
repeat Значение по умолчанию. Шаблон размножается как по горизонтали, так и по вертикали
repeat-x Шаблон размножается только по горизонтали
repeat-y Шаблон размножается только по вертикали
no-repeat Шаблон будет отображен только один раз

Изображение для примера:

Лампа

Пример

Размножим изображение по горизонтали и вертикали:

Ваш браузер не поддерживает HTML5 тег canvas.

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();