Kurs HTML5 – Canvas – Podstawy
Autor: Norbert Blandzi
Opublikowano: 2011-11-15
Pośród wielu nowości, które pojawiły się wraz z wprowadzeniem HTML5 dość ciekawy jest element canvas. Służy on do tworzenia grafiki rastorowej w oknie przeglądarki za pomocą języka JavaScript. Możesz go wykorzystać między innymi do: rysowania wykresów, tworzenia galerii zdjęć, tworzenia animacji 2D.
Przed wykonaniem zadań powinieneś przeczytać samouczki Kursu HTML i CSS.
Po wykonaniu zadań nauczysz się:
- podstaw dotyczących elementu canvas,
- rysować prostokąt,
- obsługiwać przeglądarki, które nie mają wsparcia dla elementu canvas.
Implementacja
Efekt końcowy został przedstawiony na Rys. 1.
Rys. 1. Plik index.html.
Twoim zadaniem jest:
- utworzenie elementu <canvas>,
- przygotowanie <canvas> do rysowania,
- narysowanie prostokąta,
- wsparcie dla przeglądarek nie obsługujących <canvas>.
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>Canvas</title>
</head>
<body>
</body>
</html>
Utworzenie elementu <canvas>
W celu określenia obszaru rysowania, pomiędzy znacznikami <body></body>, dodaj kod wg schematu:
<canvas id="nazwa" width="" height="">
</canvas>
gdzie:
- id – unikalny identyfikator,
- width – szerokość elementu canvas (domyślnie 300px),
- height – wysokość elementu canvas(domyślnie 150px).
- Ustaw kursor za znacznikiem body i dodaj nową linię.
- Wpisz:
<canvas id="image" width="300" height="300">
</canvas>
Po utworzeniu nowego elementu, nie jest on jeszcze widoczny w oknie przeglądarki. Należy skorzystać z metody getContext, umożliwiającej wykorzystanie funkcji rysujących. Umieść ją od razu w funkcji, którą wykorzystasz do narysowania prostokąta.
- Ustaw kursor po znaczniku </title> i dodaj nową linię.
- Wpisz:
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById('image');
var context = canvas.getContext('2d');
}
</script>
- Dodaj atrybut w znaczniku <body>, który uruchomi funkcję draw() po załadowaniu strony:
<body onload="draw();">
Stworzony właśnie szablon, będziesz wykorzystywał w dalszych częściach samouczka.
Rysowanie prostokąta
Jeśli masz już gotowe miejsce do rysowania, wykonaj pierwszy rysunek. Narysuj żółty kwadrat z mniejszym czerwonym kwadratem pośrodku. Przed rozpoczęciem rysowania, zwróć jeszcze uwagę na współrzędne elementu <canvas>. Punkt (0,0) nie znajduje się jak na układzie kartezjańskim pośrodku obrazka, ale w jego lewym górnym rogu. W celu narysowania prostokąta, uzupełnij funkcję rysującą (w tym wypadku draw()) jedną z poniższych funkcji:
fillRect(x,y,s,w)
– wypełnia obszar z lewym górnym rogiem, znajdujący się w punkcie (x,y) o szerokości (s) i wysokości (w), podawanych w pikselach,fillStyle ='kolor'
– zmienia kolor wypełnienia. Możliwe formaty koloru, np. 'red', postać hexadecymalna, np. '#aabbcc' lub format rgb, np. rgb(123,123,123) – podobnie jak w CSS – zobacz Jak określać kolory w CSS,strokeRect(x,y,s,w)
– rysuje kontur prostokąta z lewym górnym rogiem, znajdującym się w punkcie (x,y), o szerokości (s) i wysokości (w), podawanych w pikselach,strokeStyle = 'kolor'
– zmienia kolor konturu prostokąta; używa się go tak samo jak przy fillStyle(),clearRect(x,y,s,w)
– czyści obszar (rysuje przeźroczysty kwadrat) na obszarze z lewym górnym rogiem, znajdującym się w punkcie (x,y), o szerokości (s) i wysokości (w), podawanych w pikselach.
- Utwórz nową linię w funkcji draw().
- W funkcji draw()po linii
var context = canvas.getContext('2d')
; wpisz:
context.fillStyle = 'yellow';
context.fillRect(0,0,100,100);
context.strokeRect(0,0,100,100);
context.fillStyle = 'red';
context.fillRect(30,30,30,30);
- Otwórz plik index.html w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 1.
Obsługa przeglądarek, które nie wspierają elementu canvas
HTML 5 jest nowym standardem i część starszych przeglądarek nie jest w stanie wyświetlić elementu canvas. Warto przy tworzeniu strony z tym elementem pomyśleć o tym i dodać obsługę tych przeglądarek, np. wyświetlając użytkownikowi informację o braku wsparcia w jego przeglądarce. Wykonać to można poprzez umieszczenie tekstu komunikatu pomiędzy znacznikami <canvas></canvas>. Ukaże się on w przypadku, gdy przeglądarka nie będzie wspierała elementu canvas, np. :
<canvas id="image" width="300" height="300">
Twoja przeglądarka nie wspiera Canvas! Zainstaluj Internet Explorer 9.
</canvas>
Strona końcowa
Poniżej możesz zobaczyć końcowy kod strony:
<!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.fillStyle = 'yellow';
context.fillRect(0, 0, 100, 100);
context.strokeRect(0, 0, 100, 100);
context.fillStyle = 'red';
context.fillRect(30, 30, 30, 30);
}
</script>
</head>
<body onload="draw();">
<canvas id="image" width="300" height="300">
Twoja przeglądarka nie wspiera Canvas! Zainstaluj Internet Explorer 9.x
</canvas>
</body>
</html>
Podsumowanie
W tym samouczku nauczyłeś się, jak utworzyć element canvas, narysować na nim prostą figurę, a także, jak obsłużyć przeglądarki, które nie radzą sobie z tym elementem.
W kolejnym samouczku nauczysz się wykorzystywać podstawowe kształty w Canvas.
Zadanie
Aby sprawdzić swoje umiejętności, spróbuj narysować na elemencie canvas prosty obrazek, taki jak na Rys. 3.
Rys. 3. Zadanie – kwadraty w elemencie canvas.
- Canvas ma rozmiar 800x600 pikseli.
- Kwadraty mają wymiary 100x100 pikseli.
- Rozpocznij rysowanie kwadratu żółtego (yellow) w punkcie (0,0), czerwonego (red) w punkcie (30,30), zielonego (green) w punkcie (90,60), niebieskiego (blue) w punkcie (150,30), a brązowego (brown) w punkcie (190,0).
- Zwróć uwagę na to, że rysując na elemencie canvas, kolejne rysunki przykrywają poprzednie, dlatego w pierwszej kolejności narysuj żółty i brązowy kwadrat, następnie czerwony i niebieski, a na końcu zielony.
<!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.fillStyle = 'yellow';
context.fillRect(0,0,100,100);
context.strokeRect(0,0,100,100);
context.fillStyle = 'red';
context.fillRect(30,30,100,100);
context.fillStyle = 'brown';
context.fillRect(190,0,100,100);
context.fillStyle = 'blue';
context.fillRect(150,30,100,100);
context.fillStyle = 'green';
context.fillRect(90,60,100,100);
};
</script>
</head>
<body onload="draw();">
<canvas id="image" width="800" height="600">
Twoja przeglądarka nie wspiera elementu canvas!
Pobierz Internet Explorer 9 lub nowszą wersję!
</canvas>
</body>
</html>