Canvas w HTML pozwala na dynamiczne tworzenie grafiki za pomocą JavaScriptu. Może być używany do rysowania wykresów, animacji, gier oraz wielu innych interaktywnych elementów graficznych. W tym artykule omówię podstawy pracy z elementem <canvas>, pokażę jak używać go do rysowania różnych kształtów i przedstawię kilka praktycznych przykładów.
Podstawy elementu Canvas HTML
Aby używać <canvas>, musisz go umieścić w swoim kodzie HTML i ustawić jego szerokość i wysokość. Następnie używasz JavaScript do rysowania na canvasie.
Przykład podstawowej struktury Canvas:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Podstawowy Canvas</title>
</head>
<body>
<h1>Podstawowy Canvas</h1>
<canvas id="myCanvas" width="400" height="250" style="border:5px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
</script>
</body>
</html>W powyższym przykładzie, element <canvas> o szerokości 400 pikseli i wysokości 250 pikseli jest dodany do strony. Atrybut style z border dodaje obramowanie, aby można było zobaczyć granice elementu.
Rysowanie kształtów w HTML
Canvas pozwala rysować różne kształty, takie jak prostokąty, koła, linie i wiele innych. Do rysowania używamy kontekstu rysowania 2D, który jest uzyskiwany za pomocą metody getContext('2d').
Rysowanie prostokąta
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rysowanie Prostokąta</title>
</head>
<body>
<h1>Rysowanie Prostokąta</h1>
<canvas id="myCanvas2" width="400" height="250" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
context.fillStyle = "#FF0000"; // Ustawienie koloru wypełnienia
context.fillRect(50, 50, 150, 100); // Rysowanie prostokąta
</script>
</body>
</html>W powyższym przykładzie, fillStyle ustawia kolor wypełnienia na czerwony, a fillRect rysuje prostokąt zaczynający się od punktu (50, 50) o szerokości 150 pikseli i wysokości 100 pikseli.
Rysowanie konturu prostokąta
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rysowanie Konturu Prostokąta</title>
</head>
<body>
<h1>Rysowanie Konturu Prostokąta</h1>
<canvas id="myCanvas3" width="400" height="350" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas3');
var context = canvas.getContext('2d');
context.strokeStyle = "#0000FF"; // Ustawienie koloru konturu
context.strokeRect(200, 200, 150, 100); // Rysowanie konturu prostokąta
</script>
</body>
</html>W tym przypadku, strokeStyle ustawia kolor konturu na niebieski, a strokeRect rysuje kontur prostokąta.
Rysowanie linii
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rysowanie Linii</title>
</head>
<body>
<h1>Rysowanie Linii</h1>
<canvas id="myCanvas4" width="400" height="250" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas4');
var context = canvas.getContext('2d');
context.beginPath(); // Rozpoczęcie nowej ścieżki
context.moveTo(50, 50); // Punkt początkowy linii
context.lineTo(200, 200); // Punkt końcowy linii
context.stroke(); // Rysowanie linii
</script>
</body>
</html>Tutaj beginPath rozpoczyna nową ścieżkę, moveTo ustawia punkt początkowy, lineTo ustawia punkt końcowy, a stroke rysuje linię.
Rysowanie łuków i kół
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rysowanie Koła</title>
</head>
<body>
<h1>Rysowanie Koła</h1>
<canvas id="myCanvas5" width="400" height="350" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas5');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(250, 250, 100, 0, 2 * Math.PI); // Rysowanie koła
context.stroke(); // Rysowanie konturu koła
</script>
</body>
</html>W powyższym przykładzie, arc rysuje łuk z centrum w punkcie (250, 250), o promieniu 100 pikseli, od kąta 0 do 2π (pełne koło).
Rysowanie tekstu
Canvas HTML umożliwia także rysowanie tekstu, co jest przydatne do dodawania opisów i innych elementów tekstowych.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rysowanie Tekstu</title>
</head>
<body>
<h1>Rysowanie Tekstu</h1>
<canvas id="myCanvas6" width="400" height="250" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas6');
var context = canvas.getContext('2d');
context.font = "30px Arial"; // Ustawienie stylu czcionki
context.fillStyle = "green"; // Ustawienie koloru tekstu
context.fillText("Hello Canvas", 50, 50); // Rysowanie tekstu
</script>
</body>
</html>Tworzenie gradientów w Canvas HTML
Tworzenie gradientów liniowych
Gradient liniowy to przejście kolorów wzdłuż linii prostej. Aby stworzyć gradient liniowy w canvas, używamy metody createLinearGradient().
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Liniowy</title>
</head>
<body>
<h1>Gradient Liniowy</h1>
<canvas id="myCanvas7" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas7');
var context = canvas.getContext('2d');
// Tworzenie gradientu liniowego
var gradient = context.createLinearGradient(0, 0, 500, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// Użycie gradientu do wypełnienia prostokąta
context.fillStyle = gradient;
context.fillRect(0, 0, 500, 500);
</script>
</body>
</html>W powyższym przykładzie, createLinearGradient(0, 0, 500, 0) tworzy gradient, który przechodzi poziomo od lewej do prawej strony kanwy. addColorStop(0, 'red') i addColorStop(1, 'blue') definiują kolory gradientu – od czerwonego (0) do niebieskiego (1).
Tworzenie gradientów radialnych
Gradient radialny to przejście kolorów promieniujące od jednego punktu dookoła. Do stworzenia gradientu radialnego używamy metody createRadialGradient().
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Radialny</title>
</head>
<body>
<h1>Gradient Radialny</h1>
<canvas id="myCanvas8" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas8');
var context = canvas.getContext('2d');
// Tworzenie gradientu radialnego
var gradient = context.createRadialGradient(250, 250, 50, 250, 250, 250);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(1, 'green');
// Użycie gradientu do wypełnienia prostokąta
context.fillStyle = gradient;
context.fillRect(0, 0, 500, 500);
</script>
</body>
</html>W tym przykładzie, createRadialGradient(250, 250, 50, 250, 250, 250) tworzy gradient radialny, który zaczyna się od środka kanwy z promieniem 50 pikseli i rozciąga się do promienia 250 pikseli. addColorStop(0, 'yellow') i addColorStop(1, 'green') definiują kolory gradientu – od żółtego (0) do zielonego (1).
Gradient w tekście
Przykład gradientu liniowego w tekście.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Liniowy w Tekście</title>
</head>
<body>
<h1>Gradient Liniowy w Tekście</h1>
<canvas id="myCanvas9" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas9');
var context = canvas.getContext('2d');
// Tworzenie gradientu liniowego
var gradient = context.createLinearGradient(0, 0, 500, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// Użycie gradientu do wypełnienia tekstu
context.font = "50px Arial";
context.fillStyle = gradient;
context.fillText("Gradientowy Tekst", 50, 250);
</script>
</body>
</html>Animacje w Canvas HTML
Canvas pozwala również na tworzenie animacji, które mogą być używane w grach lub interaktywnych aplikacjach.
Przykład prostej animacji
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prosta Animacja</title>
</head>
<body>
<h1>Prosta Animacja</h1>
<canvas id="myCanvas10" width="400" height="250" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas10');
var context = canvas.getContext('2d');
var x = 50;
var y = 50;
var dx = 2;
var dy = 2;
var radius = 20;
function drawBall() {
context.clearRect(0, 0, canvas.width, canvas.height); // Czyszczenie kanwy
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
context.closePath();
if(x + dx > canvas.width - radius || x + dx < radius) {
dx = -dx;
}
if(y + dy > canvas.height - radius || y + dy < radius) {
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(drawBall, 10); // Rysowanie co 10 milisekund
</script>
</body>
</html>W powyższym przykładzie, funkcja drawBall rysuje kulkę, która odbija się od krawędzi kanwy. setInterval wywołuje tę funkcję co 10 milisekund, tworząc efekt animacji.
Canvas HTML - podsumowanie
Element <canvas> w HTML oferuje ogromne możliwości tworzenia interaktywnych i dynamicznych grafik na stronach internetowych. Dzięki znajomości podstawowych funkcji i metod rysowania, takich jak fillRect, strokeRect, arc, fillText i innych, można tworzyć różnorodne elementy graficzne. Dodatkowo, możliwości animacji otwierają drogę do tworzenia bardziej zaawansowanych aplikacji i gier. Z czasem, gdy zdobędziesz większe doświadczenie, będziesz w stanie tworzyć coraz bardziej złożone i interesujące projekty za pomocą <canvas>.