CanvasRenderingContext2D: translate()-Methode

translate(x, y)

Die translate()-Methode fügt der aktuellen Matrix eine Translationstransformation hinzu, indem sie die Leinwand und deren Ursprung um x Einheiten horizontal und y Einheiten vertikal im Raster verschiebt.

x

Entfernung, die in horizontaler Richtung verschoben werden soll. Positive Werte sind nach rechts und negative nach links.

y

Entfernung, die in vertikaler Richtung verschoben werden soll. Positive Werte sind nach unten und negative nach oben.

Keiner (undefined).

Dieses Beispiel zeichnet ein Quadrat, das von seiner Standardposition mithilfe der translate()-Methode verschoben wird. Ein unverändertes Quadrat derselben Größe wird dann zum Vergleich gezeichnet.

HTML

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

JavaScript

Die translate()-Methode verschiebt den Kontext um 110 Einheiten horizontal und 30 Einheiten vertikal. Das erste Quadrat wird um diese Beträge von seiner Standardposition verschoben.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Moved square
ctx.translate(110, 30);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 80, 80);

// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Unmoved square
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 80, 80);

Ergebnis

Das verschobene Quadrat ist rot, und das unveränderte Quadrat ist grau.

• Das Interface, das diese Methode definiert: CanvasRenderingContext2D