CanvasRenderingContext2D: translate() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

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

Syntax

translate(x, y)

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

Der Ursprung einer Leinwand wurde auf den x- und y-Achsen basierend auf den Werten der translate-Methode verschoben.

Parameter

x: Entfernung für die Bewegung in horizontaler Richtung. Positive Werte sind nach rechts, negative nach links.
y: Entfernung für die Bewegung in vertikaler Richtung. Positive Werte sind nach unten, negative nach oben.

HTML

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);