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>