IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

Crtanje pravougaonika

Evo jednog jednostavnog primera koji crta dva kvadrata koji se preklapaju:

<html><head>
<script type="application/javascript">
function crtaj() {
   canvas = document.getElementById("kocke");
   if (canvas.getContext) {
      ctx = canvas.getContext("2d");
      ctx.fillStyle = "rgb(200,0,0)";
      ctx.fillRect (10, 10, 55, 50);
      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect (30, 30, 55, 50);
   }
}
</script>
</head><body onload="crtaj();">
<canvas id="kocke" width="150" height="150"></canvas>
</body></html>

Ovde smo crtali dva popunjena i obojena pravougaonika. Postoje tri funkcije koje crtaju pravougaonik:

  • fillRect(x, y, dužina, visina) - crta ispunjen pravougaonik
  • strokeRect(x, y, dužina, visina) - crta samo konture pravougaonika
  • clearRect(x, y, dužina, visina) - briše sve nacrtano unutar kontura ovako definisanog pravougaonika

X i Y su koordinate gornjeg levog temena pravougaonika, a dužina je dužina pravougaonika a visina je visina.

Pre nego krenemo dalje da damo prikaz kako se definiše canvas i kako je postavljen koordinatni sistem, i kako izgleda definicija pravougaonika unutar canvas-a:

Evo primera sa sve tri funkcije gornje:

<html><head>
<script type="application/javascript">
function crtaj() {
    canvas = document.getElementById("kocke");
    if (canvas.getContext) {
        ctx = canvas.getContext("2d");
        ctx.fillRect(25,25,100,100);
        ctx.clearRect(45,45,60,60);
        ctx.strokeRect(50,50,50,50);
    }
}
</script>
</head><body onload="crtaj();">
<canvas id="kocke" width="150" height="150"></canvas>
</body></html>

Medjutim kada crtanje pravuganika kombinujemo sa drugim geometrijskim figurama kako bi nacrtali složene crteže koristiti se funkcija:

rect(x, y, width, height)

Ali rect( ) se koristi samo u kombinaciji sa funkcijama stroke() i fill() koje će mo objasniti odma u sledećem naslovu:

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