HTML5 Canvas i JavaScript. Wprowadzenie.

html5

Poziom podstawowy

Wstęp do HTML5 zaczniemy od jednego z najważniejszych elementów tej technologii, mianowicie HTML5 Canvas. Powiemy krótko o tym, jak wygląda programowanie w JavaScript w kontekście elementu Canvas (oraz innych elementów w przyszłych artykułach).

HTML5 Canvas

HTML5 daje nam wiele nowych możliwości, w tym nowy element Canvas, będącego częścią specyfikacji języka HTML5. Element ten to jakoby środowisko do tworzenia dynamicznych grafik, renderowania kształtów i obrazów bitmapowych czy też operacji graficznych.

Grafikę tworzymy za pomocą skryptów JavaScript, a dzięki HTML5 Canvas możliwe stało się tworzenie animacji i gier działających w przeglądarkach, i to bez dodatkowych wtyczek.

Przejdźmy do kodu. Poniższy przykład przedstawia podstawowy dokument HTML5:

Przykład:


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Basics</title>

</head>
<body>
  <p>Hello HTML5</p>

</body>
</html>

Podstawy Canvas

Do stworzenia elementu Canvas używamy odpowiedniego znacznika oraz podajemy wymiary (domyślne wymiary to 300×150 px).

Przykład:

<canvas id="przyklad" width="400" height="200">
  Ten tekst pokaże się, jeśli przeglądarka nie 
  wspiera HTML5 Canvas.
</canvas>

Jeśli podamy jakąś treść pomiędzy znacznikiem otwierającym i zamykającym zostanie ona wyświetlona w przeglądarkach, które nie obsługują tego elementu. To praktycznie wszystko jeśli chodzi o samo tworzenie elementu Canvas w HTML5. Reszta czyli właściwe rysowanie odbywa się w JavaScripcie.

HTML5 Canvas API

Pierwsze co należy zrobić to odnieść się do elementu Canvas i jego kontekstu (API):

var canvas = document.getElementById('przyklad');
var context = canvas.getContext('2d');

Teraz można już rysować w dwuwymiarowej przestrzeni Canvas. Warto też wspomnieć, że współrzędne w HTML5 Canvas zaczynają się od lewego, górnego rogu – punkt 0,0 znajduje się w tym miejscu.

Uruchamianie przykładu

Musimy posiadać przeglądarkę wspierającą omawianą technologię, tak jak Google Chrome czy nowsze wersje Firefox. Po prawdzie istnieje też biblioteka html5.js pomagająca uporać się z kompatybilnością z HTML5 w przeglądarce IE:

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Canvas zawiera obszar, po którym możemy rysować z użyciem odpowiedniego API, dostępnego z poziomu języka JavaScript.

W JavaScript odwołamy się do obiektu i pobierzemy dla niego kontekst, na którym będziemy mogli wykonać właściwe operacje:

var przyklad = document.getElementById('przyklad');
var ctx = przyklad.getContext('2d');

// kolor niebieski
ctx.fillStyle = "rgb(0,0,255)";

// narysuj kwadrat w ustawionym kolorze
ctx.fillRect(10, 10, 90, 90);

Właśnie tak to wygląda, a poniżej pełny przykład użycia Canvas z HTML5:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    
    <script type="application/javascript">
    function rysuj() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        
        // rgb
        ctx.fillStyle = "rgb(0,0,200)";
        ctx.fillRect (10, 10, 90, 90);
        
        // rgb + parametr alpha
        ctx.fillStyle = "rgba(200, 0, 0, 0.6)";
        ctx.fillRect (20, 20, 90, 90);
    }
    
    </script>
 </head>
 
 <body onload="rysuj()">
   <canvas id="canvas" width="250" height="250"></canvas>
 </body>
 
</html>

Przykład dostępny tutaj.

Proszę zwrócić uwagę na typowe dla HTML5 sekcje DOCTYPE i typ skryptu JavaScript (application/javascript).


Dla dociekliwych więcej ciekawych i pouczających przykładów podstawowych na Opera Developer Community.

Podsumowanie

Poruszenie tematu HTML5 Canvas to tylko rozgrzewka przed przyszłymi artykułami oraz projektami, i przed potencjalnie prawdziwą rewolucją, jaką jest WebGL.

W kolejnym artykule postaramy się przedstawić kurs HTML5 w pigułce, omawiający kluczowe zagadnienia pracy z tą technologią. Będziemy także używać biblioteki „modernizr”, ułatwiającą pracę i pomagającą na problemy z kompatybilnością.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+2Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.
  • Jak wprowadzenie do canvasa, to pozwolę sobie dodać kilka słów.

    Canvas bez wątpienia jest znakomitym rozszerzeniem dającym możliwości programowego rysowania / renderowania grafiki. Również wprowadza samo programowanie w JavaScript na nowy poziom.

    Podstawowe rysowanie użyciem canvas – linia:

    <canvas id="myCanvas" width="250" height="125" 
      style="border: 1px solid #0000dd;">
    Your browser does not support the HTML5 canvas.
    </canvas>
    
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
    

    Kilka linijek kodu JS – krótko i na temat 🙂