Polecane kursy:

Podręcznik Canvas

Metoda Canvas translate()

Definicja i użycie translate()

Komentarz:metoda, która ponownie mapuje pozycję (0,0) na płótnie. Kiedy wywołujesz metody takie jak fillRect() x i podobnych metodach, wartości są dodawane do y wartościach współrzędnych.

Ilustracja metody translate()

Przykład

Narysuj prostokąt w pozycji (10,10), ustaw nową pozycję (0,0) na (70,70). Narysuj ponownie nowy prostokąt (uwaga: teraz prostokąt zaczyna się od pozycji (80,80)):

Twoja przeglądarka nie obsługuje znacznika HTML5 canvas.

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);

Spróbuj sam

Gramatyka

context.translate(x,y);

Wartość parametru

Parametr Opis
x Wartość dodana do osi poziomej (x).
y Wartość dodana do osi pionowej (y).

Obsługa 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:Internet Explorer 8 i wcześniejsze wersje nie obsługuje elementu <canvas>.

Podręcznik Canvas