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 des Musters und ruft es auf das Muster auf.
Syntax
setTransform(matrix)
Parameter
Rückgabewert
Keiner (undefined
).
Beispiele
Verwendung der setTransform
-Methode
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
<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.
Spezifikationen
Specification |
---|
HTML # dom-canvaspattern-settransform-dev |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
setTransform | ||||||||||||
Accepts a DOMMatrix2DInit -like object parameter |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasPattern
DOMMatrix