Transformacije
Nakon svih gornjih transformacija, na primer rotacije, translacije i
skaliranja možemo na kraju napraviti matricu svih tranlsacija, odnosno matricu
transformacije. Funkcija za to je:
transform (m11, m12, m21, m22, dx, dy)
Naravno kao i svaka matrica, i ova se može pretstaviti šematski:
m11 m21 dx
m12 m22 dy
0 0 1
Postoji i funkcija:
setTransform (m11, m12, m21, m22, dx, dy)
Evo sad jednog primera koji obuhvata setTransforms() funkciju ali i skoro sve
ostale funkcije za transformacije:
<html><head>
<script type="text/javascript">
i=0;
function crtaj(){
img = new Image();
img.src = "jsslikeplanete/neptun.jpg";
img.onload = function(){
canvas = document.getElementById("tutorial");
if (canvas.getContext){
ctx = canvas.getContext("2d");
crtaj()
}
function crtaj(){
brzina1=5
brzina2=1
ctx.save()
ctx.clearRect(0,0,750,750); // briše prethodno pre crtanja
novog
ctx.setTransform (-.5,.5,-1,.25,250,img.width*.5)
ctx.rotate(Math.PI*2*(i/360)*brzina1 )
ctx.drawImage(img,img.width*-.5,-48);
ctx.restore();
ctx.save()
ctx.setTransform(-.5,.5,-1,.01,250,img.width)
ctx.rotate(Math.PI*2*(i/360)*brzina2 )
ctx.drawImage(img,img.width*-.5,-48);
ctx.restore();
font="Times new roman"
size= 40 // velicina teksta
/*__________U navodnicima pišemo tekst po
želji_________________*/
text="3D Canvas Tekst"
/*U nastavku sledi podešavanje teksta*/
ctx.save()
debljina =20
for (j=1; j<debljina; j++){
ctx.setTransform(-.5,.5,-1,.01,250,img.width*.5-j)
ctx.rotate(Math.PI*2*(i/360)*brzina2 )
ctx.translate(-img.width*.25,
img.height*.25);
ctx.fillStyle="rgba(255,190,100,.3)"
ctx.mozTextStyle = size + "pt " + font ;
ctx.mozDrawText(text);
}
ctx.restore()
ctx.save()
ctx.setTransform(-.5,.5,-1,.01,250,img.width*.5-debljina)
ctx.rotate(Math.PI*2*(i/360)*brzina2 )
ctx.translate(-img.width*.25, img.height*.25);
gradBase =
ctx.createLinearGradient(0,-img.height*.25,0,img.height*.25);
gradBase.addColorStop(0 ,"rgb(255,220,150)");
gradBase.addColorStop(0.2,"rgb(220,180,90)");
gradBase.addColorStop(0.5,"rgb(185,155,70)");
gradBase.addColorStop(1 ,"rgb( 140, 100,50)");
ctx.mozTextStyle = size + "pt " + font ;
ctx.fillStyle=gradBase
ctx.mozDrawText(text);
ctx.restore()
gradGloss = ctx.createLinearGradient(150,150,250,250);
gradGloss.addColorStop(0 ,"rgba(255,255,255,.4)");
gradGloss.addColorStop(0.35,"rgba(225,225,225,.4)");
gradGloss.addColorStop(0.65,"rgba(180,180,180,.3)");
gradGloss.addColorStop(1 ,"rgba( 120, 120,120,.1)");
ctx.save()
ctx.setTransform(-.5,.5,-1,.01,250,img.width*.5-debljina)
ctx.rotate(Math.PI*2*(i/360)*brzina2 )
ctx.translate(-img.width*.25, img.height*.25);
ctx.mozTextStyle = size + "pt " + font ;
ctx.fillStyle=gradGloss
ctx.mozDrawText(text);
ctx.restore()
i+=1;
if (i==360) i=i%360
setTimeout(crtaj, 50);
}
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid black;
background-color: black;
}
</style></head>
<body onload="crtaj()">
<canvas id="tutorial" width="500" height="300"></canvas>
</body></html>
