Artykuł
04/19/2013

Kurs HTML5 – Canvas – Kształty

Autor: Norbert Blandzi

Opublikowano: 2011-11-16

W poprzednim samouczku dowiedziałeś się, jak rozpocząć pracę z elementem <canvas> oraz jak narysować prostokąt. Ten samouczek natomiast poświęcony będzie rysowaniu kształtów.

Przed wykonaniem zadań powinieneś przeczytać samouczek:

Canvas podstawy

Po wykonaniu zadań nauczysz się:

rysować ścieżki i linie,
rysować łuki,
rysować krzywe.

Implementacja

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

Rys. 1. Efekt końcowy.

Twoim zadaniem jest:

utworzenie czworokąta z wykorzystaniem ścieżek,
utworzenie łuku,
utworzenie krzywej kwadratowej.

Przygotowanie strony

Przygotuj podstawowy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zapoznaj się z pierwszym samouczkiem 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>
            <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="300" height="300">
            Twoja przeglądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersję! 
        </canvas>
    </body>
</html>

Utworzenie czworokąta

Podczas tworzenia ścieżek i linii w Canvas, wykorzystaj następujące metody:

beginPath() – rozpoczyna tworzenie ścieżki,
closePath() – kończy tworzenie ścieżki,
moveTo(x,y) – ustawia punkt, od którego rozpoczniesz rysować (x,y) (domyślnie jest on ustawiony w miejscu zakończenia poprzedniego rysunku),
lineTo(x,y) – rysuje linie do punktu (x,y) z miejsca oznaczonego metodą moveTo() lub punktu, w którym zakończone zostało poprzednie rysowanie,
fill() – wypełnia ścieżkę kolorem podanym w parametrze fillStyle(). Warto zwrócić uwagę, że metoda ta sama domyka ścieżki, dlatego nie wymaga użycia metody closePath(),
fillStyle='kolor' – zmienia kolor wypełnienia metody, gdzie kolor może być nazwą angielską, formatem szesnastkowym lub RGB,
stroke() – rysuje kontur ścieżki,
strokeStyle='kolor' – zmienia kolor konturu ścieżki, gdzie kolor może być nazwą angielską, formatem szesnastkowym lub rgb.

Ustaw kursor za wierszem, zawierającym metodę getContext() i dodaj nową linię.
Wpisz:

context.beginPath();
context.moveTo(50,50);
context.lineTo(100,0);
context.lineTo(150,50);
context.lineTo(100,100);
context.lineTo(50,50);
context.fillStyle = 'green';
context.fill();

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

Rys. 2. Czworokąt w Canvas.

Rysowanie łuku

Rysowanie łuku jest równie proste jak rysowanie ścieżek, z tą różnicą, że przy rysowaniu łuków wykorzystujesz metody:

arc(x, y, r, kątP, kątK, kierunek) – x, y to współrzędne środka okręgu, na którym rysowany jest łuk; r to promień okręgu, kątP, kątK określają odpowiednio kąt początkowy i końcowy łuku (wartość w radianach); kierunek to wartość boolowska, określająca kierunek rysowania (false – zgodny z ruchem wskazówek zegara, true – przeciwnie).

Najlepiej widać to na Rys. 3.

Rys. 3. Właściwości łuku w canvas.

Zamiana stopni na radiany jest możliwa na pomocą następującego równania:

miara_w_radianach = miara_w_stopniach * (Math.PI / 180)

Math.PI to wartość liczby PI, która określona jest w bibliotece Math języka JavaScript:

lineWidth = size – grubość lini w pixelach.

Utwórz nową linię w funkcji draw().
Poniżej poprzednio dodanych poleceń wpisz:

context.beginPath();
context.arc(200,50,30,Math.PI,0,false);
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();

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

Rys. 4. Łuk w Canvas.

Rysowanie krzywej kwadratowej

Rysowanie krzywej kwadratowej dostępne jest dzięki wykorzystaniu metody:

quadraticCurveTo(PktX, PktY, x, y) – PktX, PktY są współrzędnymi punktu, wg którego krzywa jest wyginana, a x,y są współrzędnymi punktu końcowego.

Najlepiej widać to na Rys. 5., gdzie:

fioletowe kółko to punkt o współrzędnych (PktX, PktY),
czerwone kółko to punkt o współrzędnych (x, y),
zielone kółko to punkt o współrzędnych ustawianych w metodzie moveTo().

Rys. 5. Krzywa kwadratowa.

Utwórz nową linię w funkcji draw().
Poniżej dodanych poprzednio poleceń wpisz:

context.beginPath();
context.moveTo(50,250);
context.quadraticCurveTo(100,200,180,280);
context.closePath();
context.strokeStyle = "red";
context.stroke();

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 narysować ścieżki i linie oraz łuki i krzywą kwadratową na elemencie <canvas>.

W kolejnym samouczku nauczysz się wykorzystywać obrazki w elemencie canvas.

Zadanie

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

Rys. 6. Zadanie – krzywe w elemencie canvas.

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

Wielkość Canvas: 300x300 pikseli.
Grubość linii – 10.
Buzia to okrąg (2*PI) o środku w punkcie 150, 150 i promieniu 145.
Usta to półokrąg (PI) o środku w punkcie 150, 150 i promieniu 100.
Prawe oko to okrąg (2*PI) o środku w punkcie 100, 85 i promieniu 20.
Lewe oko to okrąg (2*PI) o środku w punkcie 200, 85 i promieniu 20.
Nos to zakończony półokrąg (PI) o środku w punkcie 150, 150 i promieniu 30.

<!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.beginPath();
            context.lineWidth = 10;
            context.arc(150, 150, 145, 0, Math.PI * 2, true);
            context.moveTo(250, 150);
            context.arc(150, 150, 100, 0, Math.PI, false);
            context.moveTo(120, 85);
            context.arc(100, 85, 20, 0, Math.PI * 2, true);
            context.moveTo(220, 85);
            context.arc(200, 85, 20, 0, Math.PI * 2, true);
            context.moveTo(150, 150);
            context.arc(150, 150, 30, Math.PI, 0, true); 
            context.closePath();
            context.stroke(); }
    </script>
</head>
<body onload="draw();">
    <canvas id="image" width="300" height="300">
    </canvas>
</body>
</html>

Share via