HTML5 Canvas Animation With RequestAnimFrame

 HTML5 Canvas Animation With RequestAnimFrame

1. <html>
2. <head>
3. <style>
4. body{
5. magin:0px;
6. padding:0px;
7. }
8. </style>
9. </head> 
10. <body>
11. <canvas id="mycanvas" width="500" height="250">
12. <script>
13. window.requestAnimFrame = (function(callback)){
14. return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
15. function(callback){
16. window.setTimeout(callback, 1000/60);
17. };
18. })();
19. function animation(){
20. var canvas = document.getElementById('MyCanvas');
21. var context = canvas.getContext('2d');
22. 
    
23. context.clearRect(0, 0, canvas.width, canvas.height);
24. requestAnimFrame(function(){
25. animation();
26. });
27. }
28. animation();
29. </script>
30. </body>
31. </html>