CanvasPattern: метод setTransform()

Метод CanvasPattern.setTransform() использует объект DOMMatrix в качестве матрицы преобразования шаблона и вызывает его для шаблона.

matrix

Объект DOMMatrix, который используется в качестве матрицы преобразования шаблона.

Нет (undefined).

Это всего лишь простой фрагмент кода, который использует метод setTransform для создания CanvasPattern с указанным преобразованием шаблона из DOMMatrix. Шаблон применяется, если вы устанавливаете его в качестве текущего fillStyle и рисуется на холсте при использовании метода fillRect(), например.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);

const img = new Image();
img.src = "canvas_create_pattern.png";

img.onload = () => {
  const pattern = ctx.createPattern(img, "repeat");
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};

Редактируемый пример

Вот редактируемый пример приведенного выше фрагмента кода. Попробуйте изменить аргумент для SetTransform() чтобы увидеть эффект.

• Интерфейс, определяющий этот метод: CanvasPattern
• DOMMatrix