html5自动放大图片动画,Html5学习--运动且旋转并放大缩小的动画效果

(function(){

var canvas=null,

context=null,

angle=0;

num=0;

value=1;

function resetCanvas(){

canvas=document.getElementById("simple");

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

context=canvas.getContext("2d");

}

function animate(){

context.save();

try{

//清除画布

context.clearRect(0, 0, canvas.width, canvas.height);

if(num==100){

value=-1;

}

else if(num==0)

{

value=1;

}

num +=value;

context.scale(num*1/50,num*1/50)

//设置原点

context.translate(canvas.width * 0.5, canvas.height * 0.5);

//旋转角度

context.rotate(angle);

//设置填充颜色

context.fillStyle = "#FF0000";

//绘制矩形

context.fillRect(0, 0, 100, 100);

angle += 0.05 * Math.PI;

}

finally{

context.restore();

}

}

//当窗口改变时

$(window).bind("resize",resetCanvas).bind("reorient",resetCanvas);

$(document).ready(function(){

window.scrollTo(0,1);

resetCanvas();

setInterval(animate,40);

});

})();