TinyScript
03-01-2009, 01:26 AM
Hello everyone, I'm new to the forum and this is my first post. I'd like to share a simple use of the setTransform operation.
First I rotate an image on a tilted plane. Then I move up and draw some 3D text. The text rotates in a nice 3D ish effect. There's no perspective. it's simple tranformations. I have some image slicing scripts I've used to create a perspective as well but I need to play with transformations a little more to fully understand them. I'm self taught and have no formal computer training. I just love playing with javascript and canvas. I hope this is useful to others. It would make a great logo scaled down and positioned in a corner.
and here's the code
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
var i =0;
function draw(){
var img = new Image();
img.src = 'http://www.codingforums.com/img/logo.gif';
img.onload = function(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
ctx = canvas.getContext('2d');
Draw()
}
function Draw(){
var speed1=1
var speed2=5
ctx.save()
ctx.clearRect(0,0,750,750); // clears the canvas each time Draw is called
ctx.setTransform(-.5,.5,-1,.25,250,img.width*.5)
ctx.rotate(Math.PI*2*(i/360)*speed1 )
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)*speed2 )
ctx.drawImage(img,img.width*-.5,-48);
ctx.restore();
var font='Times new roman'
var size= 50
/*______________input your text just below____________________________________*/
var text='3D Canvas Text'
/*______________ the text to be drawn must be between the quotes______________*/
/*text 3D back. set thickness by adjusting j limit*/
ctx.save()
var thickness=30
for (j=1;j<thickness;j++){
ctx.setTransform(-.5,.5,-1,.01,250,img.width*.5-j)
ctx.rotate(Math.PI*2*(i/360)*speed2 )
ctx.translate(-img.width*.25, img.height*.25);
//ctx.fillStyle="black"
ctx.fillStyle="rgba(255,190,100,.3)"
ctx.mozTextStyle = size + "pt " + font ;
ctx.mozDrawText(text);
}//end for loop text back
ctx.restore()
/*top layer for text. set translate y cordinate to -thickness */
ctx.save()
ctx.setTransform(-.5,.5,-1,.01,250,img.width*.5-thickness)
ctx.rotate(Math.PI*2*(i/360)*speed2 )
ctx.translate(-img.width*.25, img.height*.25);
var 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()
/*optional glossy layer for final text color.set translate y cordinate to -thickness to lay on top*/
var 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-thickness)
ctx.rotate(Math.PI*2*(i/360)*speed2 )
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(Draw,50);
}
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black;background-color:black; }
</style>
</head>
<body onload="draw()">
<canvas id="tutorial" width="750" height="750"></canvas>
</body>
</html>
First I rotate an image on a tilted plane. Then I move up and draw some 3D text. The text rotates in a nice 3D ish effect. There's no perspective. it's simple tranformations. I have some image slicing scripts I've used to create a perspective as well but I need to play with transformations a little more to fully understand them. I'm self taught and have no formal computer training. I just love playing with javascript and canvas. I hope this is useful to others. It would make a great logo scaled down and positioned in a corner.
and here's the code
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
var i =0;
function draw(){
var img = new Image();
img.src = 'http://www.codingforums.com/img/logo.gif';
img.onload = function(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
ctx = canvas.getContext('2d');
Draw()
}
function Draw(){
var speed1=1
var speed2=5
ctx.save()
ctx.clearRect(0,0,750,750); // clears the canvas each time Draw is called
ctx.setTransform(-.5,.5,-1,.25,250,img.width*.5)
ctx.rotate(Math.PI*2*(i/360)*speed1 )
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)*speed2 )
ctx.drawImage(img,img.width*-.5,-48);
ctx.restore();
var font='Times new roman'
var size= 50
/*______________input your text just below____________________________________*/
var text='3D Canvas Text'
/*______________ the text to be drawn must be between the quotes______________*/
/*text 3D back. set thickness by adjusting j limit*/
ctx.save()
var thickness=30
for (j=1;j<thickness;j++){
ctx.setTransform(-.5,.5,-1,.01,250,img.width*.5-j)
ctx.rotate(Math.PI*2*(i/360)*speed2 )
ctx.translate(-img.width*.25, img.height*.25);
//ctx.fillStyle="black"
ctx.fillStyle="rgba(255,190,100,.3)"
ctx.mozTextStyle = size + "pt " + font ;
ctx.mozDrawText(text);
}//end for loop text back
ctx.restore()
/*top layer for text. set translate y cordinate to -thickness */
ctx.save()
ctx.setTransform(-.5,.5,-1,.01,250,img.width*.5-thickness)
ctx.rotate(Math.PI*2*(i/360)*speed2 )
ctx.translate(-img.width*.25, img.height*.25);
var 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()
/*optional glossy layer for final text color.set translate y cordinate to -thickness to lay on top*/
var 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-thickness)
ctx.rotate(Math.PI*2*(i/360)*speed2 )
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(Draw,50);
}
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black;background-color:black; }
</style>
</head>
<body onload="draw()">
<canvas id="tutorial" width="750" height="750"></canvas>
</body>
</html>