Metoda translate() na powierzchni HTML canvas
Definicja i użycie
translate() metoda ponownie mapuje pozycję (0,0) na powierzchni kanwy.
Komentarz:Kiedy wywołujesz metody takie jak fillRect() podobnymi metodami, wartości będą dodawane do x i y wartości współrzędnych.
Przykład
Narysuj prostokąt w pozycji (10,10), ustaw nową pozycję (0,0) na (70,70). Narysuj kolejny prostokąt (proszę zauważyć, że teraz prostokąt zaczyna się od pozycji (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);
Gramatyka
context.translate(x,y);
Wartości parametrów
| Parametry | Opis |
|---|---|
| x | Wartość dodana do osi x (współrzędnej x). |
| y | Wartość dodana do osi y (współrzędnej y). |
Wsparcie przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Komentarz:Przeglądarki Internet Explorer 8 i wcześniejsze wersje nie obsługuje elementu <canvas>.
