Login lub e-mail Hasło   

Dynamiczna grafika w HTML5

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.
Wyświetlenia: 1.344 Zamieszczono 07/07/2013

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.

Podobne artykuły


11
komentarze: 32 | wyświetlenia: 690
11
komentarze: 40 | wyświetlenia: 733
11
komentarze: 1 | wyświetlenia: 487
10
komentarze: 8 | wyświetlenia: 913
10
komentarze: 7 | wyświetlenia: 769
10
komentarze: 1 | wyświetlenia: 691
10
komentarze: 5 | wyświetlenia: 771
9
komentarze: 0 | wyświetlenia: 462
9
komentarze: 7 | wyświetlenia: 722
9
komentarze: 20 | wyświetlenia: 626
9
komentarze: 1 | wyświetlenia: 475
9
komentarze: 2 | wyświetlenia: 425
9
komentarze: 34 | wyświetlenia: 513
9
komentarze: 124 | wyświetlenia: 520
9
komentarze: 0 | wyświetlenia: 469
 
Autor
Artykuł

Powiązane tematy






Brak wiadomości


Dodaj swoją opinię
W trosce o jakość komentarzy wymagamy od użytkowników, aby zalogowali się przed dodaniem komentarza. Jeżeli nie posiadasz jeszcze swojego konta, zarejestruj się. To tylko chwila, a uzyskasz dostęp do dodatkowych możliwości!
 

© 2005-2018 grupa EIOBA. Wrocław, Polska