Artykuł
11/24/2011

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>

Udostępnij za pośrednictwem