środa, 10 czerwca 2015

HTML5/CSS3 / HTML5

[HTML5] Podstawy pracy z Canvas

TRUE
5067432574550638982
Element Canvas pojawił się dopiero w HTML5. Służy on do rysowania grafiki w oknie przeglądarki bezpośrednio za pomocą Javascriptu. Sam z siebie jest w HTML5 jedynie pustym polem, w którym następnie za pomocą odpowiednich metod w Javascripcie rysować możemy dynamicznie dane elementy. Możliwości elementu Canvas jeśli chodzi o rysowane obiekty są praktycznie nieograniczone i zależą jedynie od programisty. Podobnie jak w przypadku biblioteki GD w języku PHP mamy tutaj zestaw kilku predefiniowanych metod slużących do generowania podstawowych kształtów, co za tym idzie - tworząc ich kombinacje jesteśmy w stanie wygenerować właściwie dowolny obiekt.

W artykule tym przyjrzymy się podstawom generowania takiej grafiki za pomocą Canvas i javascriptowych metod. Narysujemy sobie kilka podstawowych kształtów i omówimy jak to wszystko mniej więcej działa.

Element Canvas

Pierwszym krokiem zawsze będzie utworzenie pustego obiektu typu Canvas, co zrobimy następująco:

  1. <canvas id="myCanvas" width="400" height="300"></canvas>

Przy okazji dodamy sobie do niego obramowanie:

  1. <html>
  2.  
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <title>Canvas</title>
  8.  
  9. <style>
  10.  
  11. #myCanvas {
  12.  
  13.   border: 1px solid #000;
  14.  
  15. }
  16.  
  17. </style>
  18.  
  19. </script>
  20.  
  21. </head>
  22.  
  23. <body>
  24.  
  25. <canvas id="myCanvas" width="400" height="300"></canvas>
  26.  
  27. </body>
  28.  
  29. </html>
  30.  



Wygenerowało nam to pusty obiekt Canvas, który następnie obsłużyć musimy za pomocą JavaScriptu. Do naszego Canvasa odwołamy się w JS za pomocą identyfikatora #myCanvas.

  1. <script>
  2.  
  3. // przypisujemy element Canvas do zmiennej canvas
  4.  
  5. var canvas = document.getElementById('myCanvas');
  6.  
  7. </script>

Kolejnym krokiem jest utworzenie specjalnego obiektu służącego do rysowania w przestrzeni 2D, robimy to następująco:

  1. <script>
  2.  
  3. // przypisujemy element Canvas do zmiennej canvas
  4.  
  5. var canvas = document.getElementById('myCanvas');
  6.  
  7.  
  8.  
  9. // Tworzymy obiekt słuzący do generowania grafiki w 2D i przypisujemy go do context
  10.  
  11. var context = canvas.getContext("2d");
  12.  
  13. </script>

Warto nadmienić, iż za pomocą getContext() możemy także utworzyć obiekt służący do operacji w przestrzeni 3D (za pomocą WebGL).
My jednak pozostańmy przy 2D. W tym momencie mamy już gotowy do generowania grafiki element Canvas, pora coś narysować. Wszystkie operacje związane z rysowaniem wykonywać będziemy za pomocą metod obiektu context. Zacznijmy od czegoś prostego, np. od wygenerowania wypełnionego prostokąta.

Rysujemy wypełniony prostokąt - fillRect()

Do rysowania wypełnionego prostokąta służy metoda:

  1. fillRect(x, y, width, height);

gdzie:

  • x - współrzędna X od której rysujemy
  • y - współrzędna Y od której rysujemy
  • width - szerokość prostokąta
  • height - wysokość prostokąta

Warto pamiętać, iż współrzędne liczymy od początku elementu Canvas na stronie, a nie od początku samej strony.
Liczymy je oczywiscie od lewego, górnego rogu.
Narysujmy ten prostokąt:

  1. <script>
  2.  
  3. // przypisujemy element Canvas do zmiennej canvas
  4.  
  5. var canvas = document.getElementById('myCanvas');
  6.  
  7.  
  8.  
  9. // Tworzymy obiekt słuzący do generowania grafiki w 2D i przypisujemy go do context
  10.  
  11. var context = canvas.getContext("2d");
  12.  
  13.  
  14.  
  15. // Rysujemy prostokąt
  16.  
  17. context.fillRect(5, 5, 120, 100);
  18.  
  19. </script>

Domyślnie wypełni się on kolorem czarnym:

My jednak nie chcemy, aby był czarny i kolor chcemy sobie zdefiniować sami, np. czerwony.
Kolor definiujemy we własności fillStyle:

  1. fillStyle = wartość_koloru;

gdzie wartość koloru możemy podać tak jak w stylu CSS, możemy też podać tutaj gradient, lub deseń.
Na początek podajmy zwykły kolor, niech to będzie czerwony, czyli:

  1. fillStyle = '#ff0000';

Pamiętajmy, że wartość koloru wypełnienia definiujemy przez wygenerowaniem obiektu, nasz kod wyglądać więc będzie tak:

  1. <script>
  2.  
  3. // przypisujemy element Canvas do zmiennej canvas
  4.  
  5. var canvas = document.getElementById('myCanvas');
  6.  
  7.  
  8.  
  9. // Tworzymy obiekt słuzący do generowania grafiki w 2D i przypisujemy go do context
  10.  
  11. var context = canvas.getContext("2d");
  12.  
  13.  
  14.  
  15. // definiujemy kolor wypełnienia (czerwony)
  16.  
  17. context.fillStyle = '#ff0000';
  18.  
  19.  
  20.  
  21. // Rysujemy prostokąt
  22.  
  23. context.fillRect(5, 5, 120, 100);
  24.  
  25. </script>

Co w efekcie da nam piękny czerwony prostokąt:

Jak teraz dodać obramowanie do naszego prostokąta?
W standardowy sposób się nie da. Aby stworzyć obrys, czyli obramowanie użyć musimy metody:

  1. stroke();

Kolor obrysu definiujemy we własności:

  1. strokeStyle = wartość_koloru;

Jego grubość w pikselach natomiast za pomocą:

  1. lineWidth = wartość w px;

Metoda stroke() rysuje obrys na zdefiniowanej wcześniej ścieżce.
W naszym przypadku ścieżką tą będzie nasz prostokąt, ale tym razem nie wypełniony, gdyż metoda:

  1. fillRect()

zamyka ścieżkę wypełniając prostokąt, więc nie możemy jej użyć do narysowania obrysu.
Zamiast tego skorzystamy ze zwykłej metody:

  1. rect();

która generuje jedynie ścieżkę prostokąta, ale nie wypełnia go kolorem.
Zrobimy to więc następująco:

  1. <script>
  2.  
  3. // przypisujemy element Canvas do zmiennej canvas
  4.  
  5. var canvas = document.getElementById('myCanvas');
  6.  
  7.  
  8.  
  9. // Tworzymy obiekt słuzący do generowania grafiki w 2D i przypisujemy go do context
  10.  
  11. var context = canvas.getContext("2d");
  12.  
  13.  
  14.  
  15. // definiujemy kolor wypełnienia (czerwony)
  16.  
  17. context.fillStyle = '#ff0000';
  18.  
  19.  
  20.  
  21. // definiujemy grubość obramowania (6px)
  22.  
  23. context.lineWidth = '6';
  24.  
  25.  
  26.  
  27. // definiujemy kolor obramowania (czarny)
  28.  
  29. context.strokeStyle = '#000000';
  30.  
  31.  
  32.  
  33. // Tworzymy ścieżkę w postaci prostokąta
  34.  
  35. context.rect(5, 5, 120, 100);
  36.  
  37.  
  38.  
  39. // Rysujemy obrys ścieżki:
  40.  
  41. context.stroke();
  42.  
  43. </script>

Jak widzimy, działa:
Mamy obrys, ale zniknęło nam wypełnienie.
Aby teraz wypełnić stworzoną ścieżkę kolorem używamy metody:

  1. fill();

Wypełnia ona ścieżkę kolorem zdefiniowanym wsześniej we własności fillStyle.
Dodajmy więc do naszego kodu wypełnienie:

  1. <script>
  2.  
  3. // przypisujemy element Canvas do zmiennej canvas
  4.  
  5. var canvas = document.getElementById('myCanvas');
  6.  
  7.  
  8.  
  9. // Tworzymy obiekt słuzący do generowania grafiki w 2D i przypisujemy go do context
  10.  
  11. var context = canvas.getContext("2d");
  12.  
  13.  
  14.  
  15. // definiujemy kolor wypełnienia (czerwony)
  16.  
  17. context.fillStyle = '#ff0000';
  18.  
  19.  
  20.  
  21. // definiujemy grubość obramowania (6px)
  22.  
  23. context.lineWidth = '16';
  24.  
  25.  
  26.  
  27. // definiujemy kolor obramowania (czarny)
  28.  
  29. context.strokeStyle = '#000000';
  30.  
  31.  
  32.  
  33. // Tworzymy ścieżkę w postaci prostokąta
  34.  
  35. context.rect(5, 5, 120, 100);
  36.  
  37.  
  38.  
  39. // Wypełniamy ścieżkę kolorem:
  40.  
  41. context.fill();
  42.  
  43.  
  44.  
  45. // Rysujemy obrys ścieżki:
  46.  
  47. context.stroke();
  48.  
  49. </script>

Wynik:

Warto tutaj zauważyć, iż wypełnienie daliśmy w kodzie przed narysowaniem obrysu.
Zrobiliśmy tak dlatego, gdyż w odwrotnej kolejności wypełnienie przykryłoby nam obrys - obiekty są generowane warstwowo w kolejności takiej w jakiej występują w kodzie.

Wskaźnik i rysowanie linii - moveTo()

Javascript podczas generowania grafiki w elemencie Canvas korzysta z czegoś w rodzaju wirtualnego wskaźnika, który jest ustawiany na danej pozycji. Można to porównać do ołówka i rysowania na kartce. Gdy coś rysujemy, ołówek jest takim wskaźnikiem i rysując coś na kartce przesuwamy po niej ołówek tworząc tym samym rysunek. W Javascript działa to tak samo, tyle tylko, że nie widzimy tego "ołówka", ale możemy określić za to dokładnie jego współrzędne. Na takiej zasadzie między innymi rysujemy linię. Procedura jest następująca: określamy punkt startowy naszego "ołówka", czyli współrzędną w elemencie Canvas oraz punkt końcowy. Javascript następnie przeciągnie nasz "ołówek" od punktu początkowego do punktu końcowego, tworząc tym samym linię.
Punkt początkowy ustawiamy za pomocą metody:

  1. moveTo(x, y);

gdzie x i y to współrzędne w jakich ustawiamy wskaźnik.

Punkt końcowy do którego ma się po linii prostej przesunąć wskaźnik określamy za pomocą:

  1. lineTo(x, y);

gdzie x i y to współrzędne do jakich przesuwamy wskaźnik.
Po stworzeniu takiej ścieżki całość oczywiście potraktujemy metodą, która stworzy nam tam obrys, czyli stroke(). Inaczej nie zobaczylibyśmy efektu takiego działania.

Narysujmy więc sobie linię prowadzącą od początku obiektu Canvas (0,0) do jego końca (400, 300).
Nasz kod wyglądać będzie tak:

  1. <script>
  2.  
  3. // przypisujemy element Canvas do zmiennej canvas
  4.  
  5. var canvas = document.getElementById('myCanvas');
  6.  
  7.  
  8.  
  9. // Tworzymy obiekt słuzący do generowania grafiki w 2D i przypisujemy go do context
  10.  
  11. var context = canvas.getContext("2d");
  12.  
  13.  
  14.  
  15. // definiujemy grubość obramowania (6px)
  16.  
  17. context.lineWidth = '16';
  18.  
  19.  
  20.  
  21. // definiujemy kolor obramowania (czarny)
  22.  
  23. context.strokeStyle = '#000000';
  24.  
  25.  
  26.  
  27. // ustawiamy punkt początkowy
  28.  
  29. context.moveTo(0, 0);
  30.  
  31.  
  32.  
  33. // ustawiamy punkt końcowy
  34.  
  35. context.lineTo(400, 300);
  36.  
  37.  
  38.  
  39. // rysujemy obrys
  40.  
  41. context.stroke();
  42.  
  43. </script>

A efekt jego działania tak:

Rysowanie okręgu - arc()

Aby narysować okrąg musimy użyć metody:

  1. arc(x, y, r, angle_start, angle_stop);

gdzie:

  • x i y - współrzędne środka okręgu
  • r - promień okręgu
  • angle_start - kąt początkowy w radianach
  • angle_stop - kąt końcowy w radianach

Zauważmy, że kąty podajemy w radianach, a nie w stopniach, czyli w formie PI * liczba.
Przedstawia to poniższy obrazek:

źródło: w3schools


gdzie:

  • środek - arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI)
  • kąt początkowy - arc(100, 75, 50, 0, 1.5*Math.PI)
  • kąt końcowy - arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI) 

Narysujmy sobie okrąg w całości, gdzie kątem początkowym będzie 0, a kątem końcowym 2PI.

  1. <script>
  2.  
  3. // przypisujemy element Canvas do zmiennej canvas
  4.  
  5. var canvas = document.getElementById('myCanvas');
  6.  
  7.  
  8.  
  9. // Tworzymy obiekt słuzący do generowania grafiki w 2D i przypisujemy go do context
  10.  
  11. var context = canvas.getContext("2d");
  12.  
  13.  
  14.  
  15. // definiujemy grubość obramowania (6px)
  16.  
  17. context.lineWidth = '6';
  18.  
  19.  
  20.  
  21. // definiujemy kolor obramowania (czarny)
  22.  
  23. context.strokeStyle = '#000000';
  24.  
  25.  
  26.  
  27. // rysujemy ścieżkę okręgu
  28.  
  29. context.beginPath();
  30.  
  31. context.arc(200, 150, 50, 0, 2*Math.PI);
  32.  
  33.  
  34.  
  35. // rysujemy obrys
  36.  
  37. context.stroke();
  38.  
  39. </script>

Wynik takiego działania:

Zauważmy, że wykorzystaliśmy tutaj metodę o nazwie:

  1. beginPath();

Metoda ta rozpoczyna rysowanie nowej ścieżki i zamyka poprzednią o ile wcześniej była taka stworzona.

Ścieżkę możemy też zamknąć za pomocą:

  1. closePath();


I to tyle tytułem wprowadzenia do elementu Canvas.
W następnych artykułach zobaczymy jak tworzyć tekst, operować na obrazkach, dokonywać transformacji i wiele innych ciekawych rzeczy.
Autor: Publikacja:
Etykiety: ,

Brak komentarzy:

Prześlij komentarz

Masz sugestię? Znalazłeś błąd? Napisz komentarz! :)

Subskrybuj: Komentarze do posta (Atom)
webmaester.pl - profesjonalne projektowanie WWW i webaplikacji
webmaester.pl - profesjonalne projektowanie WWW i webaplikacji