CanvasRenderingContext2D: Methode translate()

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Methode CanvasRenderingContext2D.translate() der Canvas 2D API fügt der aktuellen Matrix eine Verschiebungstransformation hinzu.

Syntax

translate(x, y)

Die Methode translate() fügt der aktuellen Matrix eine Verschiebungstransformation hinzu, indem sie die Zeichenfläche und ihren Ursprung im Koordinatensystem horizontal um x Einheiten und vertikal um y Einheiten verschiebt.

Der Ursprung einer Zeichenfläche wurde anhand der Werte der translate-Methode entlang der x- und y-Achse verschoben.

Parameter

x: Entfernung der horizontalen Verschiebung. Positive Werte verschieben nach rechts, negative nach links.
y: Entfernung der vertikalen Verschiebung. Positive Werte verschieben nach unten, negative nach oben.

HTML

html

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

JavaScript

Die Methode translate() verschiebt den Kontext horizontal um 110 und vertikal um 30. Das erste Quadrat wird dadurch um diese Werte 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);