HTML-холст Метод createPattern()

Изображение для использования:

Фонарь

Пример

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

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

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.

Method
createPattern()	Yes	9.0	Yes	Yes	Yes

Определение и использование

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

Элемент может быть изображением, видео или другим элементом <canvas>.

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

Синтаксис JavaScript:	контекст .createPattern ( изображение , «повтор \| повтор-x \| повтор-y \| без повторения»);

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

Parameter	Description	Play it
image	Specifies the image, canvas, or video element of the pattern to use
repeat	Default. The pattern repeats both horizontally and vertically
repeat-x	The pattern repeats only horizontally
repeat-y	The pattern repeats only vertically
no-repeat	The pattern will be displayed only once (no repeat)

❮ Справочник по холсту HTML