Wprowadzenie do HTML5 Canvas

Jak sama nazwa wskazuje Canvas to element HTML5, który pozwala nam na dynamiczne rysowanie kształtów oraz renderowanie grafiki poprzez JavaScript.

Możemy poetycko założyć, że:

Canvas jest płótnem, po którym będziemy rysować, a JavaScript pędzlem, za pomocą którego będziemy kontrolować nasz obraz.

Skoro definicję mamy już za sobą, możemy przejść do praktycznej części poradnika, gdzie poszczególne składowe HTML 5 Canvas zostaną omówione na konkretnych przykładach.

Krok 1

Tworzenie elementu canvas

Dodając element canvas, możemy zdefiniować atrybuty takie jak wysokość i szerokość.

Domyślnie ma 300 pikseli szerokości i 150 pikseli wysokości.

<canvas height="300px" width="300px"></canvas>

Krok 2

Siatka pixeli

Tworząc element Canvas, tworzymy grafikę rastrową, która opisuje obraz za pomocą punktów umieszczonych na pionowo-poziomej siatce.

W przypadku obrazów wyświetlanych na ekranie monitora, punktami są piksele. A grafika opisana jest ich mapą, którą charakteryzują trzy wartości:

wysokość,
szerokość,
kolor.

Początek tej siatki znajduje się w lewym górnym rogu na współrzędnej (0,0). Wszystkie elementy są umieszczane względem tego początku.

Krok 3

Kontekst

Aby zacząć rysować na canvas musimy dołączyć skrypt do naszego pliku HTML. Należy pamiętać, aby umieścić go po elemencie <canvas>.

Element HTML musi istnieć, zanim będziemy mogli go wybrać:

<script src="canvas.js"></script>

Następnie w skrypcie tworzymy referencje do elementu HTML Canvas oraz za pomocą metody getContext() pobieramy kontekst, który zwraca obiekt, który zawiera wiele metod służących do rysowania:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

Powyżej mamy teraz zmienną ctx, za pomocą której możemy narysować grafikę.

Krok 4

Rysowanie kształtów

Canvas wspiera tylko dwa podstawowe kształty:

prostokąty,
ścieżki (grupa punktów połączonych liniami).

Do uzyskania bardziej złożonych kształtów skorzystamy z funkcji służących do rysowania ścieżek.

Prostokąt, kwadrat

fillStyle – określa kolor wypełnienia kształtu.

fillRect(x, y, szerokość, wysokość) – rysuje wypełniony prostokąt.

Trójkąt

beginPath() – tworzy nową ścieżkę. Po jej utworzeniu przyszłe polecenia rysowania są kierowane do niej kierowane i używane do jej budowania.

moveTo(x, y) – określa początkową pozycję x i y, od której zaczniemy rysować.

lineTo(x, y) – rysuje linię od bieżącej pozycji rysowania do pozycji określonej przez x i y.

closePath() – dodaje do ścieżki linię prostą, prowadzącą do początku bieżącej ścieżki podrzędnej.

stroke() – rysuje kształt, obrysowując jego kontur.

fill() – wypełnia zawartość ścieżki

Kiedy wywołujemy fill(), utworzony kształt jest automatycznie zamykany, więc nie ma potrzeby wywoływania closePath().

Koło

arc(x, y, promień, początkowy kąt, końcowy kąt) – rysuje łuk, którego środek znajduje się w pozycji (x, y) o podanym promieniu.

strokeStyle – określa kolor konturu kształtu.

Krok 5

Animacja elementu

Podczas tworzenia animacji w Canvas HTML musimy wiedzieć o pewnym ograniczeniu.

Gdy chcemy przesunąć dowolny element, musimy przerysować zarówno ten element, jak i wszystko, co zostało narysowane przed nim. Może to zająć sporo czasu, kiedy nasze canvas będzie składało się ze złożonych kształtów. W takiej sytuacji wydajność animacji będzie zależała od szybkości komputera, na którym działa.

W tej części poradnika wykonamy prostą animację polegającą na poruszaniu się koła od lewej do prawej krawędzi obszaru.

let x = 30; // pozycja na osi x koła
let radius = 30; // promień koła
let speed = 1; // prędkość poruszania się koła
 
function loop() {
  requestAnimationFrame(loop);
 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
  ctx.beginPath();
  ctx.arc(x, 100, radius, 0, Math.PI * 2);
  ctx.strokeStyle = "purple";
  ctx.stroke();
 
  if (x + radius > 300 || x - radius < 0) {
    speed = -speed;
  }
 
  x += speed;
}
 
loop()

clearRect(x,y, szerokość, wysokość) – czyści określony prostokątny obszar, czyniąc go w pełni przezroczystym.

Podczas tworzenia animacji musimy pamiętać, aby wyczyścić obszar canvas zanim przerysujemy nasz kształt ponownie.

Jeśli tego nie zrobimy zobaczymy efekt pokazany poniżej:

Krok 6

Interakcja z kształtem

Pokażę tutaj jak w prosty sposób dodać opcję poruszania poszczególnymi elementami za pomocą przycisków WSAD na naszej klawiaturze.

Do wykrywania różnych zdarzeń możemy wykorzystać metodę addEventListener, dzięki której wykryjemy czy użytkownik nacisnął przycisk lub przesunął kursor.

W naszym przypadku skorzystamy ze zdarzenia (event) “keydown”, które zostanie wywołane, gdy klawisz na klawiaturze zostanie wciśnięty (i przytrzymany).

let x = 150; // pozycja na osi x koła
let y = 150; // pozycja osi y koła
let radius = 30; // promień koła
let speed = 1; // prędkość poruszania się koła
 
addEventListener("keydown", (event) => {
  switch (event.code) {
    case "KeyW":
      if (y > radius) {
        y -= 5;
      }
      break;
    case "KeyS":
      if (y < 300 - radius) {
        y += 5;
      }
      break;
    case "KeyA":
      if (x > radius) {
        x -= 5;
      }
      break;
    case "KeyD":
      if (x < 300 - radius) {
        x += 5;
      }
      break;
  }
});
 
function loop() {
  requestAnimationFrame(loop);
 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.strokeStyle = "purple";
  ctx.stroke();
}
 
loop();

Podsumowanie

Zaprezentowane podstawowe elementy to zaledwie ułamek możliwości, jakie ma do zaoferowania HTML5 Canvas. Jeśli chcielibyście bardziej zagłębić się w tę tematykę, odsyłam Was do oficjalnej dokumentacji.

Przy tworzeniu bardziej zaawansowanych animacji i ksztatów, korzystanie z czystego JavaScript może być problematyczne.

Dlatego zalecam wybranie dowolnej biblioteki, przykładowo React.js.