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>
