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