Artykuł
11/23/2011

Kurs HTML5 - Canvas - Transformacje

Autor: Norbert Blandzi

Opublikowano: 2011-11-22

Transformacje umożliwiają wykonywanie przekształceń na elementach grafiki w Canvas. Łatwe w użyciu metody pozwalają m.in. przesuwać, skalować, zmieniać kąt.

Przed wykonaniem zadań powinieneś przeczytać samouczki:

Po wykonaniu zadań nauczysz się:

przesuwać początek układu współrzędnych,
zmieniać jednostkę elementu canvas,
zmieniać kąt rysowania.

Implementacja

Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy.

Twoim zadaniem jest:

ustawienie początku układu współrzędnych na środku elementu canvas,
zmiana jednostki,
obrócenie obrazu o kąt.

Przygotowanie strony

Przygotuj podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy samouczek HTML i CSS: Pierwsza strona internetowa.

W edytorze HTML utwórz nowy plik pod nazwą index.html i wklej do niego szkielet strony:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Transformacje w Canvas</title>
            <script type="text/javascript">
            function draw(){
                var canvas = document.getElementById('image1');
                var context = canvas.getContext('2d');
            }
            </script>
    </head>
    <body onload="draw();">
        <canvas id="image1" width="300" height="300">
            Twoja przeglądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersję! 
        </canvas>
    </body>
</html>

Tworząc bardziej skomplikowane rysunki użyteczne są następujące dwie metody:

Save() – zapisuje stan canvas,
Restore() – przywraca stan canvas z momentu zapisu za pomocą metody save().

Metody te zostaną użyte w poniższych przykładach w celu ukazania różnic przed i po transformacjach.

Zmiana początku układu współrzędnych

Zmiana początku układu współrzędnych, względem którego odbywa się rysowanie (domyślnie lewy-górny wierzchołek elementu canvas) jest bardzo prosta, wystarczy tylko wykorzystać metodę:

Translate(x,y) – zmienia początek układu współrzędnych na punkt (x,y).

Ustaw kursor za znacznikiem z metodą getContext() i dodaj nową linię.
Wpisz następujący kod:

context.save();
context.translate(150,150);
context.fillRect(0,0,100,100);
context.restore();
context.fillStyle = "red";
context.fillRect(0,0,100,100);

Metoda save() zapisuje na stosie stan początkowy canvas, następnie musisz zmienić punkt, względem którego nastąpi rysowanie o wektor [150,150]. Najpierw musisz narysować kwadrat, przywrócić ustawienia domyślne i ponownie narysować kwadrat, który znajduje się już w innym miejscu, gdyż metoda restore() przywraca punkt początku układu współrzędnych z punktu (150,150) na punkt (0,0).

Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda jak na Rys. 2.

Rys. 2. Zmiana początku układu współrzędnych w Canvas.

Zmiana jednostki

Canvas umożliwia zmianę wielkości domyślnej jednostki z jednego piksela na większą lub mniejszą. W tym celu użyteczna jest kolejna z metod transformacji:

scale(x,y) – gdzie x i y zwiększają/zmniejszają skalę odpowiednio w poziomie i pionie, np. scale(2,2) zwiększy domyślny rozmiar jednostki w pionie i poziomie dwukrotnie.

Ustaw kursor za ostatnio dodanym poleceniem i dodaj nową linię.
Wpisz następujący kod:

context.save(); 
context.fillStyle = "green";
context.fillRect(150,0,100,100);
context.scale(0.5,0.5);
context.fillStyle = "yellow";
context.fillRect(300,0,100,100);
context.restore();

Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda jak na Rys. 2.

Rys. 3. Użycie metody scale().

Zmiana kąta rysowania

W celu narysowania obiektu obróconego o podany kąt, wykorzystaj metodę:

Rotate(kąt) – gdzie argument kąt podawany jest w radianach. W celu zrozumienia, w jaki sposób podawać kąt w radianach lub jak zamienić radiany na stopnie, zajrzyj do samouczka pt. Kształty w Canvas.

Ustaw kursor za ostatnio dodanym poleceniem i dodaj nową linię.
Wpisz następujący kod:

context.save();
context.rotate(Math.PI/4);
context.fillStyle = "green";
context.fillRect(130, -40, 100, 100);
context.restore();
context.fillStyle = "yellow";
context.fillRect(0,150,100,100);

Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 1.

Podsumowanie

W tym samouczku nauczyłeś się, jak zmienić domyślny punkt początku układu współrzędnych. Poznałeś także metodę pozwalającą skalować wielkość jednostki na elemencie canvas, a także dowiedziałeś się, jak zmienić kąt rysowania.

W kolejnym artykule poznasz, jak tworzyć i wykorzystać kompozycje.

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj narysować na elemencie canvas prosty obrazek taki, jak przedstawiony na Rys. 4.

Rys. 4. Zadanie – rotacja w elemencie canvas.

Aby zobaczyć podpowiedzi i rozwiązanie zadania przełącz na widok klasyczny.

Rozmiar elementu Canvas 500x500 pikseli.
Użyj metodę rotate z argumentem 90 stopni.
Bok kwadratu ma 100 pikseli.
Rysuj kolejne kwadraty ,używając metody fillRect() z odpowiednimi współrzędnymi.

<!DOCTYPE html>
<html lang='pl'> 
    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
        <script type="text/javascript">
            function draw(){
            var canvas = document.getElementById('image');
            var context = canvas.getContext('2d');          
            context.rotate(Math.PI/4);
            context.fillStyle = "green";
            context.fillRect(150,20,100,100);
            context.fillStyle = "blue";
            context.fillRect(150,150,100,100);
            context.fillStyle = "yellow";
            context.fillRect(150,-110,100,100);
            context.fillStyle = "pink";
            context.fillRect(150,-240,100,100);
            context.fillStyle = "grey";
            context.fillRect(20,-130,100,100);
            context.fillStyle = "red";
            context.fillRect(20,0,100,100);
            context.fillStyle = "black";
            context.fillRect(270,200,100,100);
            context.fillStyle = "violet";
            context.fillRect(270,70,100,100);
            context.fillStyle = "orange";
            context.fillRect(270,-60,100,100);
            context.fillStyle = "brown";
            context.fillRect(270,-200,100,100);
            context.fillStyle = "purple";
            context.fillRect(270,-330,100,100);
            };
        </script>
    </head>
    <body onload="draw();">
        <canvas id="image" width="500" height="500">
        Twoja przeglądarka nie wspiera elementu canvas! Pobierz Internet Explorer 9 lub nowszą wersję!
        </canvas>
    </body>
</html>

Udostępnij za pośrednictwem