Artykuł
11/23/2011

Kurs HTML5 - Canvas - Przezroczystość i cień

Autor: Norbert Blandzi

Opublikowano: 2011-11-21

Po dodaniu grafiki, jej przeskalowaniu możesz zająć się kolejnymi możliwościami, jakie daje canvas. Jedną z częściej wykorzystywanych właściwości jest określenie przezroczystości oraz cienia elementu. Dzięki temu możesz tworzyć grafiki nowej jakości bezpośrednio na stronie WWW.

Przed wykonaniem zadań powinieneś przeczytać samouczki:

Po wykonaniu zadań nauczysz się:

ustawiać przezroczystość,
określić wygląd linii.

Implementacja

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

Rys. 1. Efekt końcowy.

Twoim zadaniem jest:

ustawienie zmiennej przezroczystości na elemencie canvas,
utworzenie linii o różnych stylach.

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>Przezroczystość i cień w Canvas</title>
            <script type="text/javascript">
            function draw(){
                var canvas = document.getElementById('image1');
                var context = canvas.getContext('2d');
            }
    </head>
    <body onload="draw();">
        <canvas id="image1" width="650" height="250">
            Twoja przeglądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersję! 
        </canvas>
    </body>
</html>

Przezroczystość

Do określenia przezroczystości możesz wykorzystać następujące metody:

globalAlpha = x – gdzie x to liczba z zakresu <0,1> gdzie 0 – całkowita przezroczystość, 1 – nieprzezroczysty,
rgba(r,g,b,a) – gdzie "r","g","b" to wartości kolorów w formacie rgb, natomiast "a" oznacza przezroczystość i przyjmuje wartości jak w globalAlpha.

W katalogu, w którym znajduje się plik index.html zapisz obrazek z Rys. 2 jako wielblad.jpg.

Rys. 2. Grafika do zadania - wielblad.jpg.

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

var image = new Image();
image.src = "wielblad.jpg";
image.onload = function () {
    context.drawImage(image, 0, 0);
    context.fillRect(0,0,100,100);
    context.globalAlpha = 0.5;
    context.fillRect(110,0,100,100);
//przezroczystość
};
//linie

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

Rys. 3. Przezroczystość w cavas.

Teraz, gdy potrafisz już użyć metody globalAlpha(), spróbuj wykonać trudniejszą grafikę, która wykorzystuje przezroczystość.

Ustaw kursor za linią komentarza //przezroczystość i dodaj nową linię.
Wpisz następujący kod:

context.drawImage(image, 350, 0);
context.fillStyle = "white";
for (var i = 0; i < 1; i += 0.04) {
    context.globalAlpha = i;
    context.fillRect(350, i * 225, 350, 10); }

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

Rys. 4. Przezroczystość w Canvas.

Cień w Cavas

Do określenia cienia możesz wykorzystać następujące właściwości:

shadowColor – określa kolor cienia, taką samą wartość jak dla kolorów w CSS.
shadowBlur – określa rozmycie cienia w pikselach, im niższa wartość rozmycia, tym ostrzejsze są cienie. Standardowa wartość wynosi 0.
shadowOffsetX i shadowOffsetY – określa przesunięcie cienia w pikselach, wartości dodatnie przesuwają cień na dół i prawo, ujemne do góry i w lewo. Standardowa wartość wynosi 0.

W funkcji draw zastąp pierwsze wystąpienie polecenia context.drawImage(image, 0, 0); za pomocą następującego kodu:

context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.5)';
context.drawImage(image, 0, 0);
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;

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 określać przezroczystość, zmieniać zakończenia rysowanych linii, a także poznałeś różne sposoby ich łączenia.

W kolejnym samouczku poznasz różne sposoby transformacji grafiki w elemencie canvas.

Zadanie

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

Rys. 5. Zadanie – skalowanie w elemencie canvas.

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

Rozmiar elementu canvas wynosi 400x400 pikseli.
Określ przezroczystość na 0.5.
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.globalAlpha = 0.5;
            context.beginPath();
            context.shadowOffsetX = 10;
            context.shadowOffsetY = 10;
            context.shadowBlur = 4;
            context.shadowColor = "rgba(0, 0, 0, 0.5)"; 
            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="400" height="400">
            Twoja przeglądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersję! 
        </canvas>
</body>
</html>