Artykuł
11/23/2011

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>