HTML5 canvas rotation effect

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The keleyi.htm code is as follows:

 1 <!DOCTYPE HTML> 
 2 <html>
 3 <head>
 4 <title>HTML rotate canvas - Ke Leyi</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>

The keleyi.js code is as follows:

 1 /*
 2 * Function: rotate canvas
 3 *  
 4 * Ke Leyi 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             //Clear the canvas
20             context.clearRect(0, 0, canvas.width, canvas.height);
21             //Set the origin
22             context.translate(canvas.width * 0.5, canvas.height * 0.5);
23             //Rotation angle
24             context.rotate(angle);
25             //Set the fill color
26             context.fillStyle = "#FF0000";
27             //Draw a rectangle
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 })();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Lucine at December 16, 2013 - 2:59 AM