IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

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>

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