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>