IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

Skaliranje

Jedna od metoda transformacija je i skaliranje. To je takva transformacija kojom se može povećavati ili smanjivati širina ili visina canvas slika, pa time možemo dobiti razne efekte izduživanja ili zbijanja slika, ili pak smanjenje ili povećanje canvas slika ako i visinu i širinu slika smanjujemo odnosno povećavamo proporcionalno.

Osnovna funkcja transformacije skaliranja je:

scale(x, y)

Ova metoda, kao što vidimo, uzima dva parametra. Parametar X je faktor u vodoravnom smeru a Y u vertikalnom. Oba parametra moraju biti pozitivni brojevi. Vrednosti manja od 1.0 smanjuje a vrednost veća od 1.0 povećaava jedinicu veličine. Ako je vrednost X ili Y parametra tačno 1.0 onda ne utiče na veličinu jedinice.

Po defaultu jedna jedinica na platnu je tačno jedan piksel. Ako se primjenjuje, na primer, faktor od 0.5 to rezultira upola smanjenje visine ili širine canvas slike, a ako je faktor 2.0 onda će se širina ili visina duplo povećati.

Evo primera koji će sve lepo demonstrirati:

<html><head>
<script type="application/javascript">
function crtaj() {
  canvas = document.getElementById("kocke");
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    ctx.strokeStyle="#fc0";
    ctx.lineWidth=1.5;
    ctx.fillRect(0,0,300,300);

    ctx.save();
    ctx.translate(50,50);
    drawSpirograph(ctx,22,6,5);

    ctx.translate(100,0);
    ctx.scale(0.75,0.75);
    drawSpirograph(ctx,22,6,5);

    ctx.translate(133.333,0);
    ctx.scale(0.75,0.75);
    drawSpirograph(ctx,22,6,5);
    ctx.restore();

    ctx.strokeStyle="#0cf";
    ctx.save();
    ctx.translate(50,150);
    ctx.scale(1,0.75);
    drawSpirograph(ctx,22,6,5);

    ctx.translate(100,0);
    ctx.scale(1,0.75);
    drawSpirograph(ctx,22,6,5);

    ctx.translate(100,0);
    ctx.scale(1,0.75);
    drawSpirograph(ctx,22,6,5);
    ctx.restore();

    ctx.strokeStyle="#cf0";
    ctx.save();
    ctx.translate(50,250);
    ctx.scale(0.75,1);
    drawSpirograph(ctx,22,6,5);

    ctx.translate(133.333,0);
    ctx.scale(0.75,1);
    drawSpirograph(ctx,22,6,5);

    ctx.translate(177.777,0);
    ctx.scale(0.75,1);
    drawSpirograph(ctx,22,6,5);
    ctx.restore();
  }
}

function drawSpirograph(ctx,R,r,O){
   x1 = R-O;
   y1 = 0;
   i = 1;
   ctx.beginPath();
   ctx.moveTo(x1,y1);
   do {
     if (i>20000) break;
     x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
     y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
     ctx.lineTo(x2,y2);
     x1 = x2;
     y1 = y2;
     i++;
   } while (x2 != R-O && y2 != 0 );
   ctx.stroke();
}
</script>
</head>

<body onload="crtaj();">
<canvas id="kocke" width="500" height="500"></canvas>
</body></html>

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