Gotowe obrazki w HTMLu to żadna nowość. Jednak HTML5 dostarcza bibliotek umożliwiających tworzenie na bieżąco grafiki w wersji 2D a nawet 3D. Służy do tego powierzchnia CANVAS.
CANVAS to nowy znacznik, którego najważniejszymi atrybutami są identyfikator, szerokość i wysokość:
<canvas id="powierzchnia" width="600" height="800">
Twoja przeglądarka nie obsługuje standardu HTML5
</canvas>
Napis umieszczony w środku pojawi się tylko wtedy, gdy nie będzie można użyć procedur graficznych na przestarzałej przeglądarce.
Dla tego elementu można używać dwóch odrębnych bibliotek. Jedna do rysowania 2D w konwencji popularnej grafiki żółwiowej i druga bazująca na OpenGL ES do rysowania w 3D.
Użycie grafiki 2D inicjujemy instrukcją:
ctx = document.getElementById('powierzchnia').getContext('2d');
Po czym możemy już używać biblioteki procedur 2D dostępnych w javaScripcie np.:
ctx.strokeRect(100,50,200,300);
Wyrysuje nam prostokąt rozpoczynający się 100 pikseli od lewej i 50 pikseli od góry mający 200 pikseli szerokości i 300 pikseli wysokości.
Wcześniej można ustalić szerokość linii, kolor linii, kolor wypełnienia:
ctx,lineWidth = 5;
ctx.strokeStyle ="rgb(255,0,0)"; //dla linii czerwonej
ctx.fillStyle = "rgb(0,255,0)"; //dla zielonego wypełnienia
Aby wypełnić nasz prostokąt trzeba dodatkowo wywołać:
ctx.fillRect(100,50,200,300);
HTML5 pozwala rysować tzw. ścieżki. Składające sie z łuków i odcinków. Odcinki są rysowane z użyciem kombinacji wywołań: ctx.moveTo(x,y); i ctx.lineTo(x,y); czyli tzw. grafiki żółwiowej.
Ścieżkę rozpoczynamy od wywołania: ctx.beginPath();
a kończymy zamknięciem: ctx.closePath();
oraz instrukcją rysowania obrysu: ctx.stroke();
i ewentualnie wypełniania: ctx.fill();
Łuki rysujemy wywołaniem:
ctx.arc(cx,cy,promień,kąt_początkowy,kąt_końcowy,kierunek);
Zauważmy, że zamiast używać wywołania rysowania prostokąta można by pracowicie wywołać odpowiednią ścieżkę.
Zestaw procedur rysowania jest oczywiście bogatszy umożliwiając na przykład rysowanie dowolnych krzywych z użyciem techniki krzywych Beziera lub inaczej krzywych kwadratowych:
ctx.quadraticCurveTo(cx,cy,x,y);
rysuje z użyciem punktu kontrolnego cx,cy aż do punktu x,y.
Aby sprawnie używać tej grafiki trzeba się trochę naćwiczyć.
Grafikę 3D inicjujemy instrukcją:
gl = powierzchnia.getContext("experimentalwebgl");
Główną funkcją jakiej używamy jest:
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
definiującej wyświetlanie 3D w określonej perspektywie.
Oprócz tego trzeba używać wywołania rotate dla obracania sceny by móc wprowadzać kolejne obiekty.
Generalnie wyświetlanie 3D jest dużo bardziej skomplikowane, a jeśli to ma być animacja w grze 3D to sprawa się jeszcze bardziej komplikuje. Na szczęście twórcy gier i innych programów mogą korzystać z kompletnych frameworków ułatwiających tworzenie gier i sprowadzające się do odpowiedniego ustawiania kamer i kierowania ruchem animowanych postaci.