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: 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
Rückgabewert
Keiner (undefined
).
Beispiele
Verwendung der setTransform
Methode
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.
<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);
};
Spezifikationen
Specification |
---|
HTML # dom-canvaspattern-settransform-dev |
Browser-Kompatibilität
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasPattern
DOMMatrix