HTML5 wprowadził element <canvas>
, który umożliwia dynamiczne renderowanie grafiki bitmapowej za pomocą JavaScript. Może być wykorzystany do rysowania grafik, tworzenia animacji, gier, czy nawet obróbki i wizualizacji danych. Dzięki <canvas>
twórcy mogą tworzyć złożone efekty wizualne na stronach internetowych bez potrzeby stosowania dodatkowych wtyczek.
Przykład użycia <canvas>
Poniżej znajduje się prosty przykład, jak zacząć pracę z <canvas>
, w którym rysujemy prostokąt i koło. Kod zawiera komentarze, które pomogą zrozumieć jego działanie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Podstawy canvas w HTML5</title>
</head>
<body>
<!-- Definiowanie obszaru canvas -->
<canvas id="myCanvas" width="400" height="200"
style="border:1px solid #000;">
</canvas>
<script>
// Pobieranie elementu canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Rysowanie prostokąta
ctx.fillStyle = 'green'; // Ustawienie koloru wypełnienia
ctx.fillRect(10, 10, 150, 100); // Rysowanie prostokąta
// Rysowanie koła
ctx.beginPath(); // Rozpoczęcie nowej ścieżki
ctx.arc(300, 100, 50, 0, Math.PI * 2, true); // Określenie parametrów koła
ctx.fillStyle = 'blue'; // Ustawienie koloru wypełnienia
ctx.fill(); // Wypełnienie koła kolorem
</script>
</body>
</html>
Kontrolki w <canvas>
Element <canvas>
sam w sobie nie posiada wbudowanych “kontrolek” w tradycyjnym rozumieniu, jak np. przyciski czy pola tekstowe. Jednak za pomocą JavaScript można tworzyć interaktywne elementy graficzne, które zachowują się podobnie do kontrolek. Obejmuje to np. rysowanie przycisków na płótnie i obsługę zdarzeń myszy, aby reagować na kliknięcia.
Podsumowanie
Element <canvas>
w HTML5 otwiera przed twórcami stron internetowych nowe możliwości tworzenia zaawansowanej grafiki i interakcji z użytkownikiem. Od prostych rysunków, przez zaawansowane gry, po aplikacje do wizualizacji danych — <canvas>
dostarcza potężne narzędzie do tworzenia dynamicznych i atrakcyjnych wizualnie stron internetowych. Wymaga to jednak solidnej znajomości JavaScript i grafiki komputerowej.