HTML canvas translate() Metoda
Przykład
Narysuj prostokąt w pozycji (10,10), ustaw nową (0,0) pozycję na (70,70). Narysuj ponownie ten sam prostokąt (zauważ, że prostokąt zaczyna się teraz na 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);
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| translate() | Yes | 9.0 | Yes | Yes | Yes |
Definicja i użycie
Metoda translate() ponownie mapuje pozycję (0,0) na kanwie.
Uwaga: Kiedy wywołujesz metodę taką jak fillRect() po translate(), wartość jest dodawana do wartości współrzędnych x i y.
| Składnia JavaScript: | kontekst .translate( x,y ); |
|---|
Wartości parametrów
Uwaga: Możesz określić jeden lub oba parametry.
| Parameter | Description | Play it |
|---|---|---|
| x | The value to add to horizontal (x) coordinates | |
| y | The value to add to vertical (y) coordinates |
❮ Odniesienie do płótna HTML