HTML 5 Graphics

<html>
<body>
<canvas id=”ok” width=”500″ height=”500″>
</canvas>
<script>
window.requestAnimFrame=(function(callback){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback,1000/60);
};
})();
function drawSpring(canvas,context){
context.beginPath();
context.moveTo(0,0);
for(var i=0;i<200;i++){
var x=30*Math.sin(i/8);

context.lineTo(x,i);
}
}
function drawWeight(canvas,context){
var size=100;
context.save();
context.fillStyle=”red”;
context.font=’italic 20pt Calibri’;
context.fillText(“HITESH ROCKX”,-size/2,size/2);
context.restore();
}
function animate(canvas,theta,lasttime){
var context=canvas.getContext(‘2d’);
var time=(new Date()).getTime();
var timediff=time-lasttime;
theta+=timediff/400;
lasttime=time;
var scale=0.8*(Math.sin(theta)+1.3);
context.clearRect(0,0,canvas.width,canvas.height);
context.save();
context.translate(canvas.width/2,0);
context.save();
context.scale(1,scale);
drawSpring(canvas,context);
context.restore();
context.lineWidth=6;
context.strokeStyle=’blue’;
context.stroke();
context.translate(0,200*scale);
drawWeight(canvas,context);
context.restore();
requestAnimFrame(function(){
animate(canvas,theta,lasttime);
});
}
var canvas=document.getElementById(“ok”);
var theta=0;
var time=(new Date()).getTime();
animate(canvas,theta,time);
</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s