Html5 bubble Animation

<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,100/60);
};
})();
function animate(canvas){
var context=canvas.getContext(“2d”);
var time=(new Date()).getTime();
var widthScale=Math.sin(time/200)*0.1+0.9;
var heightScale=-1*Math.sin(time/200)*0.1+0.9;
context.clearRect(0,0,canvas.width,canvas.height);

context.beginPath();
context.save();
context.translate(canvas.width/2,canvas.height/2);

context.scale(widthScale,heightScale);

context.arc(0,0,65,0,2*Math.PI,false);
context.fillStyle=’red’;
context.fill();
context.lineWidth=2;
context.strokeStyle=’blue’;
context.stroke();
context.restore();

context.beginPath();
context.save();
context.translate(canvas.width/2,canvas.height/2);
context.scale(widthScale,heightScale);
context.arc(-30,-30,15,0,2*Math.PI,false);
context.restore();
context.fillStyle=’white’;
context.fill();
requestAnimFrame(function(){
animate(canvas);
});
}
var canvas=document.getElementById(“ok”);

animate(canvas);

</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