Перейти к содержанию

createPattern()

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

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

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

Синтаксис

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

Ссылки