CanvasPattern: setTransform() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die CanvasPattern.setTransform() Methode verwendet ein DOMMatrix Objekt als Transformationsmatrix für das Muster und wendet es auf das Muster an.

Syntax

setTransform(matrix)

Parameter

matrix: Eine DOMMatrix, die als Transformationsmatrix für das Muster verwendet wird.

Dies ist ein Code-Snippet, das die setTransform Methode verwendet, um ein CanvasPattern mit der vorgegebenen Mustertransformation von einer DOMMatrix zu erstellen. Das Muster wird angewendet, wenn Sie es als aktuelles fillStyle festlegen und auf die Leinwand zeichnen, wenn Sie zum Beispiel die Methode fillRect() verwenden.

html

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

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