A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/de/docs/Web/API/CanvasPattern/setTransform below:

CanvasPattern: setTransform() Methode - Web-APIs

CanvasPattern: setTransform() Methode

Baseline Widely available

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 Parameter
matrix

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

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 Browser-Kompatibilität Siehe auch MDN-Feedback-Box War diese Übersetzung hilfreich?

Diese Seite wurde automatisch aus dem Englischen übersetzt.


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4