本文介绍了JS和html5实现画布旋转效果示例，大家参考使用吧

keleyi.htm的代码如下：

代码如下:

jb51.js的代码如下：

代码如下:

/*

* 功能：画布旋转

*/

(function(){

var canvas=null,

context=null,

angle=0;

function resetCanvas(){

canvas=document.getElementById("jb51");

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);

//设置原点

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

//旋转角度

context.rotate(angle);

//设置填充颜色

context.fillStyle = "#FF0000";

//绘制矩形

context.fillRect(-30, -30, 60, 60);

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);

});

})();