Kurs HTML5 – Canvas – Kompozycje
Autor: Norbert Blandzi
Opublikowano: 2011-11-23
Domyślnie, w canvas elementy rysowane są jeden na drugim i nowszy obrazek przykrywa starszy. Korzystając z kompozycji, możesz to zmienić oraz określić, w jaki sposób nowe obrazy pokrywały starsze.
Przed wykonaniem zadań powinieneś przeczytać samouczki:
Po wykonaniu zadań nauczysz się:
- określać kompozycje w canvas.
Implementacja
Efekt końcowy został przedstawiony na Rys. 1.
Rys. 1. Efekt końcowy.
Twoim zadaniem jest:
- przetestować różne kompozycje.
Przygotowanie strony
Przygotuj podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszy odcinek samouczka 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>Kompozycje 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="450" height="450">
Twoja przeglądarka nie wspiera elementu canvas!
Pobierz Internet Explorer 9 lub nowszą wersję!
</canvas>
</body>
</html>
Podstawowe kompozycje
Tworzenie kompozycji wiąże się z jedną metodą:
- globalCompositeOperation=typ – gdzie typ może przybierać jedną z wartości zaprezentowanych na Rys. 2.
Rys. 2. Typy metody globalCompositeOperation.
- Ustaw kursor za znacznikiem z metodą getContext() i dodaj nową linię.
- Wpisz:
context.globalCompositeOperation = "source-over";
context.fillStyle = "blue";
context.fillRect(0, 0, 100, 100);
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);
context.fillStyle = "blue";
context.globalCompositeOperation = "destination-over";
context.fillRect(200, 0, 100, 100);
context.fillStyle = "red";
context.fillRect(250, 50, 100, 100);
- Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 3.
Rys. 3. Użycie typu source-over i destination-over metody globalCompositeOperation.
Łączenie kompozycji
Wiesz już jak stosować kompozycje, teraz spróbuj dodać inne kompozycje.
- Ustaw kursor za ostatnio dodanym kodem i dodaj nową linię.
- Wpisz:
context.globalCompositeOperation = "source-in";
context.fillStyle = "blue";
context.fillRect(0, 200, 100, 100);
context.fillStyle = "red";
context.fillRect(50, 250, 100, 100);
- Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy element canvas jest pusty.
Informacja |
Kompozycja typu "source-in" pokaże element przykrywający tylko w obszarze elementu przykrywanego. Zmieniając typ kompozycji w canvas, musisz pamiętać, że część z nich usuwa fragmenty obrazu. |
- Zmień "source-in" na "lighter".
- Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 4.
Rys. 4. Łączenie obrazków za pomocą kompozycji typu: source-over, destination-over i lighter.
- Ustaw kursor za ostatnio dodanym kodem i dodaj nową linię.
- Wpisz:
context.globalCompositeOperation = "xor";
context.fillStyle = "blue";
context.fillRect(200, 200, 100, 100);
context.fillStyle = "red";
context.fillRect(250, 250, 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 artykule nauczyłeś się zmieniać kompozycje rysowanych obrazków.
W kolejnym artykule poznasz, jak umieszczać tekst na elemencie canvas.
Zadanie
Aby sprawdzić swoje umiejętności, spróbuj narysować na elemencie canvas obrazek przedstawiony na Rys. 4.
Rys. 5. Zadanie – rotacja w elemencie canvas.
Aby zobaczyć podpowiedzi i rozwiązanie zadania przełącz na widok klasyczny.
- Rozmiar elementu canvas 350x350 pikseli.
- Określ globalCompositeOperation na "lighter".
- Na początku narysuj czerwone koło o promieniu 100 i środku w punkcie (100,200).
- Następnie narysuj niebieskie koło o promieniu 100 i środku w punkcie (220,200).
- Na końcu narysuj zielone koło o promieniu 100 i środku w punkcie (160,100).
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Zadanie Canvas</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('image1');
var context = canvas.getContext("2d");
context.globalCompositeOperation = "lighter";
context.beginPath();
context.fillStyle = "red";
context.arc(100, 200, 100, Math.PI * 2, 0, false);
context.fill()
context.beginPath();
context.fillStyle = "blue";
context.arc(220, 200, 100, Math.PI * 2, 0, false);
context.fill()
context.beginPath();
context.fillStyle = "green";
context.arc(160, 100, 100, Math.PI * 2, 0, false);
context.fill();
}
</script>
</head>
<body onload="draw();">
<canvas id="image1" width="350" height="350">
Twoja przeglądarka nie wspiera elementu canvas!
Pobierz Internet Explorer 9 lub nowszą wersję!
</canvas>
</body>
</html>