CANVAS ugradnja u HTML

CANVAS tag u HTML dokumentu izgleda ovako:

<canvas id="graf" width="150" height="150"></canvas>

CANVAS kao što vidimo ima samo dva atributa, širinu WIDTH i visinu HEIGHT izraženu u pikselima. Medjutim i širina i visina su opcioni parametri. U ovom našem slučaju platno za crtanje je dimenzije 150 X 150 piksela, a ako nije definisana širina i visina platno je po defaultu dimenzije 300 X 150 piksela.

Obzirom da CANVAS tag podržavaju samo noviji preglednici mi moramo definisati i alternativni sadržaj za te starije preglednike. Na primer možemo pisati unutar CANVAS taga bilo koji HTML sadržaj. Naravno preglednici koji podržavaju CNVAS će ignorisati HTML kod unutar početnog i krajnjeg CANVAS taga. Evo kako na primer možemo pisati za brauzere koji ne podržavaju CANVAS:

<canvas id="graf" width="150" height="150"> ovde stoji crtež grafike ali vaš brauzer je star i ne podržava prikaz. </canvas>

Ili:

<canvas id="graf" width="150" height="150"> <img src="starBrauzer.png" width="150" height="150"> </canvas>

Ovako napisano, preglednici koji podržavaju CANVAS neće prikazati sliku starBrauzer.png a ni onaj gornji tekst. Da bi brauzeri koji podržavaju CANVAS nešto prikazali treba definisati programibilnu sliku pomoću JavaScript funkcije getContext ("2d" ). na primer ovako:

<html><head> <script type="text/javascript"> function crtaj(){ canvas = document.getElementById("graf"); if (canvas.getContext){ ctx = canvas.getContext("2d"); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head><body onload=crtaj()> <canvas id="graf" width="150" height="150"></canvas> </body></html>

Naravno ovako napisan kod u brauzere koji podržavaju CANVAS daće samo prazano uokvireno platno jer još nismo ništa nacrtali. U ovom kodu takodje primetite vrlo bitnu stvar a to je da se funkcija za crtanje poziva tek nakon učitavanja dokumenta u brauzer. Ako koristimo na primer setTimeout( ) ili setInterval( ) možemo prikazivati i neke animacije, itd itd. Na kraju ću dati linkove u kojima možete videti složenije CANVAS animacije, crteže, grafikone, itd.