IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

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.

Copyright © 2010 BUbaj. Powered By bubaj.com
JavaScript    Sintaksa    Osnovne funkcije    Kontrolne strukture    Dogadjaji    Browser funkcije    HTML DOM objekti    Tabele    JS i CSS    CANVAS    Skripte