CanvasPattern: setTransform() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die CanvasPattern.setTransform()-Methode verwendet ein DOMMatrix-Objekt als Transformationsmatrix des Musters und ruft es auf das Muster auf.

Syntax

setTransform(matrix)

Parameter

matrix: Eine DOMMatrix, die als Transformationsmatrix des Musters verwendet wird.

Dies ist nur ein einfaches Codebeispiel, das die setTransform-Methode verwendet, um ein CanvasPattern mit der angegebenen Mustertransformation aus 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 fillRect()-Methode verwenden.

HTML

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

Editierbares Demo

Hier ist ein editierbares Demo des obigen Codebeispiels. Versuchen Sie, das Argument von SetTransform() zu ändern, um den Effekt zu sehen, den es hatte.

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px">
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);
};
</textarea>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;

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

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", () => {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Spezifikationen

Specification
HTML Standard # dom-canvaspattern-settransform-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Die Schnittstelle, die diese Methode definiert: CanvasPattern
DOMMatrix