Canvas translate() Methode

Canvas-Referenzhandbuch

Definition und Verwendung

translate() Methode den neuen (0,0) Standort auf dem Canvas neu positionieren.

Anmerkung:Wenn Sie nach der Aufruf von Methoden wie fillRect() solchen Methoden hinzugefügt werden, werden die Werte zu x und y koordinatenwert.

Dargestellt wird die Methode translate()

Beispiel

Zeichne einen Rechteck in der Position (10,10), setze den neuen (0,0) Standort auf (70,70). Zeichne erneut das neue Rechteck (beachte, dass das Rechteck jetzt von der Position (80,80) beginnt zu zeichnen):

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

亲自试一试

语法

context.translate(x,y);

参数值

参数 描述
x 添加到水平坐标（x）上的值。
y 添加到垂直坐标（y）上的值。

Browser-Unterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Version des Browsers, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Canvas-Referenzhandbuch