Aanbevolen cursus:
HTML canvas translate() methode
Definitie en gebruik translate()
Opmerking:wanneer u na translate() een van de volgende methoden gebruikt om de (0,0) positie op het canvas opnieuw te mappen. fillRect() soort methoden, worden de waarden toegevoegd aan x en y waarden op de coördinaatwaarden.
Voorbeeld
Een rechthoek tekenen op de positie (10,10), stel de nieuwe (0,0) positie in op (70,70). Teken opnieuw een nieuwe rechthoek (let op: nu begint de rechthoek op (80,80) te tekenen):
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);
Syntaxis
context.translate(x,y);
Parameterswaarden
| Parameters | Beschrijving |
|---|---|
| x | De waarde toevoegen aan de horizontale coördinaat (x). |
| y | De waarde toevoegen aan de verticale coördinaat (y). |
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Opmerking:Internet Explorer 8 en eerder versies ondersteunen geen <canvas> element.
