Wprowadzenie do HTML5 Canvas

Chciałbyś zrobić animowane tło na swojej stronie internetowej?

A może szukasz prostego narzędzia do stworzenia gry 2d?

W obu przypadkach potrzebujesz jedynie podstawowej znajomości HTML Canvas oraz JavaScript.

Czy trudno się tego nauczyć? Nie.

W kilku krokach postaram się tutaj omówić podstawowe elementy, które umożliwiają swobodne wykorzystywanie HTML 5 Canvas.

Powyższa grafika obrazuje uproszczoną definicję HTML 5 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, dzięki 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.

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>

Tworząc element Canvas, tworzymy grafikę rastrową, która opisuje obraz dzięki 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.

Pozycja lewego górnego rogu czerwonego kwadratu wynosi x pikseli od lewej i y pikseli od góry, na współrzędnych (x,y).

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 dzięki 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, dzięki której możemy narysować grafikę.

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.

ctx.fillStyle = "red"; ctx.fillRect(20, 20, 260, 260);

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

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

ctx.beingPath(); ctx.moveTo(150,20) ctx.lineTo(20,280) ctx.lineTo(280,280)ctx.closePath(); ctx.stroke();

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.

ctx.beingPath(); ctx.moveTo(150,20) ctx.lineTo(20,280) ctx.lineTo(280,280)ctx.fill();

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

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

ctx.beingPath(); ctx.arc(150,150, 130,0, Math.PI * 2) ctx.strokeStyle = "purple" ctx.stroke();

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.

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.

Tak będzie wyglądać animacja koła poruszającego się od lewej do prawej strony obszaru.

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:

Tak będzie wyglądać animacja koła jeżeli nie wyczyścimy obszaru canvas przed jego przerysowaniem.

Pokażę tutaj jak w prosty sposób dodać opcję poruszania poszczególnymi elementami dzięki 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();

Tak będzie wyglądać interakcja z naszym obiektem.

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.