KONTAKT
izuzetan[at]gmail.com

Klasične slike

U prostor u kome smo crali pomoću CANVES možemo uvoziti i gotove slike, koje mogu biti kao pozadina našim crtežima, ili pak da pravimo neke dinamičke animacije, itd. Možemo ubacivati bilo koje tipove slika, na primer .jpg, .gif, .png itd.

Ubacivanje slika se vrši u osnovi u dva koraka:

• Pravimo referencu na objekat JavaScript slike ili druge CANVAS elemente kao izvor. Nije moguće jednostavno ubacivanjem URL adrese slika.
• Zatim "crtamo" sliku na platno pomoću drawImage funkcije.

drawImage(image, x, y) - kao što smo već napisali ovom funkcijom ubacujemo sliku, stim što su X i Y kordinate koje definišu položaj slike i to tako da definišu gornju levu tačku slike. Zapravo drawImage( ) funkcija ima još dve varijante ali ovo je prva. Evo primera:

function crtaj() {
    var ctx = document.getElementById("kocke").getContext("2d");
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.beginPath();
        ctx.moveTo(30,96);
        ctx.lineTo(70,66);
        ctx.lineTo(103,76);
        ctx.lineTo(170,15);
        ctx.stroke();
    }
    img.src = "jsslikeplanete/mars.jpg";
}

Medjutim ne moramo definisati sliku u samoj funkciji img.src="....". Ako već u dokumentu postoji slika koju želimo da iskoristimo možemo je pozvati i ovako:

function crtaj() {
    var ctx = document.getElementById("kocke").getContext("2d");
        ctx.drawImage(document.getElementById("img1"),0,0);
        ctx.beginPath();
        ctx.moveTo(30,96);
        ctx.lineTo(70,66);
        ctx.lineTo(103,76);
        ctx.lineTo(170,15);
        ctx.stroke();
    }
}

Druga varijanta funkcije nam dodaje još dva nova parametra koja omogućavaju skaliranje slike, to jest podešavanje veličine slike koja nama odgovara. Funkcija izgleda:

drawImage(image, x, y, width, height)

Gde su width širina slike koju mi želimo, i height visina koja nama odgovara, a sve u pikselima naravno. Mislim da je ovo jasno i da ne treba neki poseban primer, jer je sve ostalo isto kao i prethodni primer.

Treća varijanta drawImag funkcije je mogućnost sečenja slike. Naime, nekad je neophodno koristiti samo neki deo slike. Funkcija izgleda sad ovako:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

sx, sy, sWidth i sHeight je pravougaonik isečka slike. Znači sx i sy su kordinate tačke u slici, a koordinatni početak u slici je sam gornji levi ugao slike. dx, dy, dWith i dHeight su u stvari oni naši poznati parametri kao iz gornje dve varijante drawImage funkcije. Ovako napisano moguće da je nejasno ali daću sliku koja objašnjava:

 Source image je slika koju sečemo, a destinacion canvas je postavljanje tog isečka slike na naše platno. Pošto je ovo verujem jasno a kod je identičan kao u prvoj varijanti drawImage funkcije, onda mislim da nije potreban primer.