Udostępnij za pośrednictwem


          

Kurs HTML5 – Canvas – Linie  Udostępnij na: Facebook

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.

  1. Ustaw kursor za linią komentarza //linie i dodaj nową linię.
  2. 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();
  1. 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.

  1. Ustaw kursor za ostatnio dodanym poleceniem i dodaj nową linię.
  2. 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();
  1. 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.

  1. Ustaw kursor za ostatnio dodanym poleceniem i dodaj nową linię.
  2. 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";
  1. Zapisz plik index.html. Otwórz go w przeglądarce i sprawdź czy wygląda tak, jak na Rys. 1.
  2. 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>