HTML canvas translate() 方法

HTML5 Canvas Referenzhandbuch

定义和用法

translate() 方法重新映射画布上的 (0,0) 位置。

Anmerkung:当您在 translate() 之后调用诸如 fillRect() 之类的方法时，值会添加到 x 和 y 坐标值上。

Dargestellt ist die Methode translate()

实例

在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：

您的浏览器不支持HTML5 canvas标签。

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

Versuchen Sie es selbst

Syntax

context.translate(x,y);

Parameterwert

Parameter Beschreibung
x Wert zur horizontalen Koordinate (x) hinzufügen.
y Wert zur vertikalen Koordinate (y) hinzufügen.

Browser-Unterstützung

Die in der Tabelle genannten Zahlen geben die Versionsnummer des ersten Browsers an, der 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.

HTML5 Canvas Referenzhandbuch