2740390507

rzeczywistym w dokumencie HTML. Sterować zawartością i zachowaniem elementu można się odwołując się do niego z zewnątrz, np. z kodu w JavaScript.

Element canvas w dokumencie HTML ma postać:

<canvas id="Canvas" width="szerokość płótna w pikselach" height="wysokość w pikselach"X/canvas>

Przykładowy kod JavaScript obsługujący Canvas [25].

<script>

var c=document.getEleraentByld("Canvas"); var ctx=c.getContext("2d"); ctx.rect(0,0,200,200); ctx.stroke();

</script>

Interpretacja:

var c=document.getElementById („Canvas") pozwala na odwoływanie się w skrypcie do stworzonego elementu dokumentu HTML.

c. getContext („2d") zwraca kontekst rysowania na wybranym płótnie (analogicznie do np. glCreateContext w OpenGL), kolejne operacje modyfikujące zawartość wybranego płótna odbywają się poprzez wywołanie odpowiedniej metody na zmiennej kontekstu.

ctx. rect (0, 0,200,200); ctx.stroke (); powodują narysowanie na płótnie kwadratu o boku długości 200 pikseli i lewym górnym rogu w punkcie 0,0. Szczegółowe zasady rysowania kształtów za pomocą wektorów poniżej.

Grafika wektorowa

Rysując kształty wektorowe na powierzchni płótna posługujemy się abstrakcyjnym wskaźnikiem, wyznaczającym aktualne współrzędne na obiekcie.

Współrzędne płótna odpowiadają współrzędnym układu kartezjańskiego ze środkiem -punktem (0,0) - w lewym górnym rogu płótna, wysokością rosnącą w dół i szerokością rosnącą w prawo. Jednostką współrzędnych domyślnie są piksele. Ważnym jest, iż odwoływać się można do punktów znajdujących się poza zakresem współrzędnych płótna, nawet ujemnych - część poza ramami nie będzie wyświetlana w dokumencie.

Metody tworzenia ścieżek:

beginPath () - rozpoczęcie kreowania nowej ścieżki. moveTo (x, y) - przemieszczenie wskaźnika do podanego punktu. lineTo (x, y) - stworzenie nowego fragmentu ścieżki - odcinka od bieżącego punktu do zadanego, oraz przeniesienie wskaźnika do nowego punktu.

18