Artykuł
11/23/2011

Kurs HTML5 – Canvas – Linie

Autor: Norbert Blandzi

Opublikowano: 2011-11-17

W poprzednim samouczku nauczyłeś się rysować różne kształty. W tym samouczku poznasz możliwości zakończenia rysowanych linii, a także różne sposoby ich łączenia.

Przed wykonaniem zadań powinieneś przeczytać samouczki:

Po wykonaniu zadań nauczysz się:

określić wygląd linii.

Implementacja

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

Rys. 1. Efekt końcowy.

Twoim zadaniem jest:

ustawienie zmiennej przeźroczystoś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>Linie 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="550">
            Twoja przeglądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersję! 
        </canvas>
    </body>
</html>

Stylowanie linii

Canvas umożliwia określenie właściwości linii za pomocą 4 metod:

lineWidth = x – wartość parametru x podawana w pikselach określa grubość linii,
lineCap = typ – określa typ zakończenia linii; parametr typ przyjmuje jedną z trzech wartości:
- butt,
- round,
- square,

Wygląd typów zakończenia linii został przedstawiony na Rys. 2.

Rys. 2. Typy metody lineCap.

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

context.strokeStyle = 'black';
context.lineWidth = 20;
context.lineCap = 'butt';
context.beginPath();
context.moveTo(30, 250);
context.lineTo(30, 400);
context.stroke();
context.lineCap = 'round';
context.beginPath();
context.moveTo(70, 250);
context.lineTo(70, 400);
context.stroke();
context.lineCap = 'square';
context.beginPath();
context.moveTo(110, 250);
context.lineTo(110, 400);
context.stroke();

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

Rys. 3. LineCap w Canvas.

lineJoin = typ – określa styl połączenia 2 linii; parametr typ przyjmuje jedną z trzech wartości:
- round,
- bevel,
- miter,

Wygląd typów połączenia linii został przedstawiony na Rys. 4.

Rys. 4. Typy metody lineJoin.

Ustaw kursor za ostatnio dodanym poleceniem i dodaj nową linię.
Wpisz następujący kod:

context.beginPath();
context.moveTo(200, 400);
context.lineTo(250, 300);
context.lineTo(300, 400);
context.lineWidth = 20;
context.lineJoin = "miter";
context.stroke();

context.beginPath();
context.moveTo(350, 400);
ontext.lineTo(400, 300);
context.lineTo(450, 400);
context.lineWidth = 20;
context.lineJoin = "round";
context.stroke();

context.beginPath();
context.moveTo(500, 400);
context.lineTo(550, 300);
context.lineTo(600, 400);
context.lineWidth = 20;
context.lineJoin = "bevel";
context.stroke();

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

Rys.5. Efekt końcowy – połączenia linii.

Ustaw kursor za ostatnio dodanym poleceniem i dodaj nową linię.
Wpisz następujący kod:

context.beginPath();
context.moveTo(200, 300);
context.lineTo(300, 350);
context.lineTo(300, 450);
context.lineTo(200, 500);
context.lineTo(100, 450);
context.lineTo(100, 350);
context.closePath();
context.lineWidth = 20;
context.lineJoin = "round";

Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź czy wygląda tak, jak na Rys. 1.
Zamień w ostatniej linijce parametr round na bevel, a następnie na miter i sprawdź, jak wyglądają połączenia wielokąta.

Podsumowanie

W tym samouczku nauczyłeś się, jak określić zakończenia rysowanych linii, a także poznałeś różne sposoby ich łączenia.

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

Zadanie

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

Rys. 6. Zadanie – linie w elemencie canvas.

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

Rozmiar elementu canvas ma 300x300 pikseli.
Grubość linii to 15 pikseli.
Na początku narysuj kwadrat, a następnie wykorzystaj metodę moveTo(), aby przenieść się do rogów kwadratu i narysować linie poprzeczne.

<!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.moveTo(40, 40); 
            context.lineTo(260, 40); 
            context.lineTo(260, 260); 
            context.lineTo(40, 260);
            context.lineTo(40, 40);
            context.lineTo(260, 260);
            context.moveTo(40, 260);
            context.lineTo(260, 40);
            context.lineWidth = 15;
            context.lineJoin = "round";
            context.stroke();
            };
        </script>
    </head>
    <body onload="draw();">
        <canvas id="image" width="300" height="300">
        Twoja przeglądarka nie wspiera elementu canvas! Pobierz Internet Explorer 9 lub nowszą wersję!
        </canvas>
    </body>
</html>