HTML-Canvas translate()-Methode
Beispiel
Zeichnen Sie ein Rechteck an Position (10,10), legen Sie die neue (0,0)-Position auf (70,70) fest. Zeichnen Sie das neue Rechteck erneut (beachten Sie, dass das Rechteck jetzt ab Position (80,80) zu zeichnen beginnt):
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);
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
Selbst ausprobieren »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die translate()-Methode.
Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
Definition und Verwendung
Die translate()-Methode ordnet die (0,0)-Position auf dem Canvas neu zu.
Hinweis:Wenn Sie eine Methode wie fillRect() nach translate() aufrufen, werden die Werte zu den x- und y-Koordinatenwerten addiert.
| JavaScript-Syntax: | context.translate(x,y); |
|---|
Parameterwerte
Hinweis: Sie können einen oder beide Parameter angeben.
| Parameter | Beschreibung |
|---|---|
| x | Der Wert, der zur horizontalen Koordinate (x) addiert wird. |
| y | Der Wert, der zur vertikalen Koordinate (y) addiert wird. |
HTML-Canvas-Referenz Andere Erweiterungen