HTML-canvas translate() Methode
Voorbeeld
Teken een rechthoek in positie (10,10), stel nieuwe (0,0) positie in op (70,70). Teken dezelfde rechthoek opnieuw (merk op dat de rechthoek nu begint in positie (80,80):
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);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
| Method | |||||
|---|---|---|---|---|---|
| translate() | Yes | 9.0 | Yes | Yes | Yes |
Definitie en gebruik
De methode translate() wijst de positie (0,0) op het canvas opnieuw toe.
Opmerking: wanneer u een methode zoals fillRect() aanroept na translate(), wordt de waarde toegevoegd aan de x- en y-coördinaatwaarden.
| JavaScript-syntaxis: | context .translate( x,y ); |
|---|
Parameterwaarden
Opmerking: U kunt een of beide parameters opgeven.
| Parameter | Description | Play it |
|---|---|---|
| x | The value to add to horizontal (x) coordinates | |
| y | The value to add to vertical (y) coordinates |
❮ HTML Canvas-referentie