Rysowanie łuków w HTML

Jeśli dopiero zaczynasz swoją przygodę z tworzeniem grafiki w przeglądarce, pewnie zastanawiasz się: czy w HTML da się narysować łuk? Odpowiedź brzmi: tak, jak najbardziej! Ale nie zrobimy tego samym HTML-em – potrzebny będzie nam element <canvas> i odrobina JavaScriptu.

W tym artykule pokażę Ci krok po kroku, jak rysować łuki, półkola, okręgi i bardziej złożone kształty przy użyciu HTML5. Omówimy nie tylko podstawy, ale też kilka trików, które ułatwią Ci życie, jeśli planujesz tworzyć dynamiczne grafiki lub gry 2D w przeglądarce.

Czym jest <canvas> i do czego służy?

Zacznijmy od podstaw.
<canvas> to specjalny element HTML5, który pozwala rysować grafikę bezpośrednio w przeglądarce – od prostych linii po skomplikowane animacje.

To taka pusta tablica malarska, na której możemy malować za pomocą JavaScriptu. Dzięki temu możemy tworzyć wykresy, wizualizacje danych, gry, animacje i inne efekty.

Przykładowy kod wygląda tak:

<canvas id="moje-canvas" width="400" height="300"></canvas>

Ten kod tworzy obszar o szerokości 400 pikseli i wysokości 300 pikseli, na którym będziemy rysować.

Przygotowanie kontekstu 2D

Samo <canvas> nic nie wyświetla. Musimy „dostać się” do jego kontekstu graficznego, czyli środowiska, w którym możemy rysować.

Zrobimy to za pomocą JavaScriptu:

<script>
  const canvas = document.getElementById("moje-canvas");
  const ctx = canvas.getContext("2d");
</script>

Zmienna ctx (skrót od context) to nasz pędzel malarski. Za jej pomocą rysujemy linie, prostokąty, łuki i wszystko, co nam przyjdzie do głowy.

Jak narysować łuk w HTML5 Canvas?

No dobrze, pora przejść do sedna.
Aby narysować łuk, użyjemy funkcji:

ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

Oto, co oznacza każdy z parametrów:

Parametr	Opis
x	Pozycja środka łuku na osi X
y	Pozycja środka łuku na osi Y
radius	Promień łuku
startAngle	Kąt początkowy (w radianach)
endAngle	Kąt końcowy (w radianach)
counterclockwise	(opcjonalnie) kierunek rysowania – true dla przeciwnie do ruchu wskazówek zegara

Uwaga: W Canvasie kąty podajemy w radianach, a nie w stopniach!
1 pełen obrót = 2π radianów.

Przykład: prosty łuk

Zobaczmy prosty przykład w akcji:

<canvas id="arcCanvas" width="400" height="300" style="border:1px solid #ccc"></canvas>

<script>
const canvas = document.getElementById("arcCanvas");
const ctx = canvas.getContext("2d");

// Ustawienia stylu
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;

// Rysowanie łuku
ctx.beginPath();
ctx.arc(200, 150, 100, 0, Math.PI, false); // półkole
ctx.stroke();
</script>

Co się stanie?
Na ekranie zobaczysz półkole narysowane od prawej do lewej strony.

Math.PI to połowa pełnego obrotu, czyli 180°.
Jeśli chcesz pełne koło, zmień Math.PI na 2 * Math.PI.

Jak zamienić stopnie na radiany?

Nie chcesz bawić się w radiany? Nie szkodzi! Możesz użyć małej funkcji pomocniczej:

function degToRad(degrees) {
  return degrees * Math.PI / 180;
}

Teraz możesz pisać:

ctx.arc(200, 150, 80, degToRad(0), degToRad(270));

I gotowe – teraz operujesz w stopniach, co jest dużo bardziej intuicyjne.

Przykład: pełne koło

Chcesz narysować okrąg? Nic prostszego. Wystarczy ustawić startAngle = 0, a endAngle = 2 * Math.PI.

<canvas id="circleCanvas" width="300" height="300"></canvas>

<script>
const c = document.getElementById("circleCanvas");
const ctx = c.getContext("2d");

ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.stroke();
</script>

Otrzymasz piękne czerwone koło!

Wypełnianie łuków kolorem

Jeśli chcesz, żeby łuk był wypełniony kolorem, użyj ctx.fill() zamiast ctx.stroke().

ctx.fillStyle = "orange";
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI);
ctx.fill();

To stworzy półkole wypełnione kolorem pomarańczowym.

Łączenie łuków z liniami

Łuki same w sobie są fajne, ale dopiero gdy połączysz je z liniami, otwiera się cały świat możliwości: możesz rysować buźki, zegary, logo, a nawet animacje.

Przykład – prosty uśmiechnięty emotikon 😄:

<canvas id="smileCanvas" width="300" height="300"></canvas>

<script>
const canvas = document.getElementById("smileCanvas");
const ctx = canvas.getContext("2d");

// Główne koło (głowa)
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.stroke();

// Lewe oko
ctx.beginPath();
ctx.arc(110, 120, 10, 0, 2 * Math.PI);
ctx.fill();

// Prawe oko
ctx.beginPath();
ctx.arc(190, 120, 10, 0, 2 * Math.PI);
ctx.fill();

// Uśmiech
ctx.beginPath();
ctx.arc(150, 160, 60, 0, Math.PI, false);
ctx.stroke();
</script>

I voilà! Mamy prostą twarz narysowaną tylko z pomocą łuków.

Animowany łuk – efekt ładowania (loading bar)

Czas na coś bardziej interaktywnego.
Pokażę Ci, jak zrobić animowany łuk, który wygląda jak ładowanie aplikacji.

<canvas id="loaderCanvas" width="300" height="300"></canvas>

<script>
const canvas = document.getElementById("loaderCanvas");
const ctx = canvas.getContext("2d");
let progress = 0;

function drawLoader() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // czyścimy płótno

  ctx.beginPath();
  ctx.arc(150, 150, 100, 0, (progress / 100) * 2 * Math.PI);
  ctx.strokeStyle = "green";
  ctx.lineWidth = 10;
  ctx.stroke();

  // Tekst z procentem
  ctx.font = "20px Arial";
  ctx.fillStyle = "black";
  ctx.fillText(`${progress}%`, 130, 160);

  if (progress < 100) {
    progress++;
    requestAnimationFrame(drawLoader);
  }
}

drawLoader();
</script>

Ten prosty kod stworzy animowany łuk, który „rośnie”, imitując proces ładowania.
Świetna zabawa i przy okazji nauka, jak działa requestAnimationFrame() – wbudowana funkcja do animacji w przeglądarce.

Wskazówki i dobre praktyki

Na koniec kilka praktycznych porad, które ułatwią Ci życie przy rysowaniu łuków:

1. Zawsze używaj beginPath() przed rozpoczęciem nowego kształtu.
   Dzięki temu nie połączysz przypadkiem nowych linii z poprzednimi.
2. Pamiętaj o ctx.closePath(), jeśli chcesz zamknąć kształt (np. półkole połączone z linią prostą).
3. Stosuj save() i restore(), jeśli modyfikujesz styl, kolor, przezroczystość – łatwo wtedy wrócić do poprzednich ustawień.
4. Eksperymentuj z ctx.lineCap i ctx.lineJoin – zmieniają wygląd końcówek linii i połączeń.
5. Konwertuj kąty ze stopni na radiany – to ułatwia kontrolę nad kształtem łuku.

Rysowanie łuków w HTML5 to świetny sposób, żeby zacząć przygodę z grafiką wektorową w przeglądarce. Dzięki elementowi <canvas> i kilku linijkom JavaScriptu możesz tworzyć wszystko — od prostych kształtów po animacje i gry.