HTML-Canvas translate()- Methode
Beispiel
Zeichnen Sie ein Rechteck an Position (10,10), setzen Sie die neue Position (0,0) auf (70,70). Zeichnen Sie dasselbe Rechteck erneut (beachten Sie, dass das Rechteck jetzt an Position (80,80) 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);
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| translate() | Yes | 9.0 | Yes | Yes | Yes |
Definition und Verwendung
Die translate()-Methode ordnet die (0,0)-Position auf der Zeichenfläche neu zu.
Hinweis: Wenn Sie eine Methode wie fillRect() nach translate() aufrufen, wird der Wert zu den x- und y-Koordinatenwerten addiert.
| JavaScript-Syntax: | Kontext .translate( x,y ); |
|---|
Parameterwerte
Hinweis: Sie können einen oder beide Parameter angeben.
| Parameter | Description | Play it |
|---|---|---|
| x | The value to add to horizontal (x) coordinates | |
| y | The value to add to vertical (y) coordinates |
❮ HTML-Canvas-Referenz