canvas w Html 5

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.

Poprzedni
Następny
Scroll to Top