html5画布的旋转效果

keleyi.htm的代码如下：

 1 <!DOCTYPE HTML> 
 2 <html>
 3 <head>
 4 <title>html旋转画布-柯乐义</title>
 5 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
 6 <script type="text/javascript" src="keleyi.js"></script>
 7 </head>
 8 <body>
 9 <canvas id="keleyi"></canvas>
10 </body>
11 </html>

keleyi.js的代码如下：

 1 /*
 2 * 功能：画布旋转
 3 * http://keleyi.com
 4 * 柯乐义 copyright
 5 */
 6 (function(){
 7     var canvas=null,
 8     context=null,
 9     angle=0;
10     function resetCanvas(){
11         canvas=document.getElementById("ke"+"leyi");
12         canvas.width=window.innerWidth;
13         canvas.height=window.innerHeight;
14         context=canvas.getContext("2d");
15     }
16     function animate(){
17         context.save();
18         try{
19             //清除画布
20             context.clearRect(0, 0, canvas.width, canvas.height);
21             //设置原点
22             context.translate(canvas.width * 0.5, canvas.height * 0.5);
23             //旋转角度
24             context.rotate(angle);
25             //设置填充颜色
26             context.fillStyle = "#FF0000";
27             //绘制矩形
28             context.fillRect(-30, -30, 60, 60);
29             angle += 0.05 * Math.PI;
30         }
31         finally{
32             context.restore();
33         }
34     }
35     $(window).bind("resize",resetCanvas).bind("reorient",resetCanvas);
36     $(document).ready(function(){
37         window.scrollTo(0,1);
38         resetCanvas();
39         setInterval(animate,40);
40     });
41 })();

http://www.cnblogs.com/sosoft/