Canvas

Najbolj zanimiva novost HTML5 je oznaka canvas. To je element, ki si ga lahko predstavljamo kot pravokotno resolucijsko odvisno bitno platno. Omogoča dinamično risanje oziroma prikazovanje grafike na spletni strani, za kar pa je potrebno nekaj programerskega znanja JavaScript.

canvas podpirajo vsi moderni brskalniki. Starejše različice Internet Explorerja canvas ne podpirajo. Pomagamo si lahko z rešitvijo ExplorerCanvas. To je JavaScript datoteka, ki jo vključimo v spletno stran na naslednji način:

<head>
   <!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>

canvas so razvili v podjetju Apple in ga tudi zaščitili. Vsem razvijalcem brskalnikov je bil všeč, zato so ga vsi vgradili v svoje brskalnike in kmalu je postal predpisan kot odprtokodna W3C specifikacija. Je način neposrednega prikaza grafike, ki ne potrebuje vtičnikov. Če hočemo na spletni vsebini prikazovati dinamično grafiko, je potrebno dinamičnost zagotoviti preko strežnika, kar je počasno, ali uporabljati vtičnike, kot naprimer Flash ali Javo. canvas pa je vmesnik za neposredno prikazovanje grafike, je neke vrste navidezna ploskev, na katero rišemo z JavaScriptom.

canvas lahko uporabimo za prikazovanje grafičnih elementov kot so:

Enostavni diagrami
Elegantne uporabniške vmesnike
Animacije in igre
Razpredelnice in grafe
Vgrajene spletne risalne aplikacije
...

Risalna orodja, ki so na voljo:

Pravokotniki
Krogi in krožni loki
Črte in sledi (paths)
Bezierove in kvadratne krivulje
Besedilo
Slike

Pri tem lahko uporabimo tudi naslednje efekte:

Enostavne oblike (funkcije za izris)
Senčenja
Linearni in radialni prelivi
Alfa prosojnost
Sestavljanja

Transformacije:

Skaliranje
Rotacije
Translacije
Transformiranje matrik

Element canvas je torej grafični vsebnik, ki mu lahko določimo širino ter višino ter ID za objekt, da ga lahko kasneje preko vmestnika DOM API najdemo v kodi JavaScript. Realno na canvas gledamo kot dvodimenzionalno koordinatno mrežo. Koordinatno izhodišče (0,0) leži na zgornjem levem kotu canvas mreže.

Na x osi se povečujejo vrednosti v desno smer, na y osi pa se povečujejo vrednosti proti dnu canvas mreže. Če bi radi kaj prikazali na tem platnu, moramo uporabiti JavaScript vmesnik 2D context API. canvas značko najdemo z metodo getElementById. Nato pa še določimo referenco na objekt z metodo getContext('2d').

Vstavljenje značke canvas na spletno stran je podobno, kot dodajanje drugih oznak HTML. Če uporabimo skripto, lahko narišemo na canvas rdeč kvadrat na naslednji način:

Primer:

<canvas id="example" width="200" height="200">   
   To besedilo se prikaže v primeru, da vaš brskalnik ne podpira HTML5 Canvas. 
</canvas> 
<script>   
   var example = document.getElementById('example');   
   var context = example.getContext('2d');
   context.strokeStyle = "gray";    
   context.lineWidth = 1;   
   context.strokeRect(0,0, 200, 200);   
   context.fillStyle = "rgb(255,0,0)";   
   context.fillRect(30, 30, 50, 50); 
</script>

Nazaj

Naprej