html 画布动画，保罗爱尔兰语，javascript，requestAnimationFrame

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 画布动画，保罗爱尔兰语，javascript，requestAnimationFrame相关的知识，希望对你有一定的参考价值。

<html>
   <head>
      <style type="text/css">
      canvas{ border:#666 1px solid;}
      </style>
   </head>
   <body>
      
      <script type ="application/javascript" language="javascript">
          // requestAnim shim layer by Paul Irish
         window.requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame ||
               window.oRequestAnimationFrame ||
               window.msRequestAnimationFrame ||
               function( /* function */ callback, /* DOMElement */ element) {
                  window.setTimeout(callback, 1000 / 60);
            };
         })();

          // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

         var canvas, context, toggle;

         init();
         animate();

         function init() {

            canvas = document.createElement('canvas');
            canvas.width = 512;
            canvas.height = 512;

            context = canvas.getContext('2d');

            document.body.appendChild(canvas);

         }

         function animate() {
            requestAnimFrame(animate);
            draw();

         }

         function draw() {

            var time = new Date().getTime() * 0.002;
            var x = Math.sin(time) * 192 + 256;
            var y = Math.cos(time * 0.9) * 192 + 256;
            toggle = !toggle;

            context.fillStyle = toggle ? 'rgb(200,200,20)' : 'rgb(20,20,200)';
            context.beginPath();
            context.arc(x, y, 10, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();

         }
      </script>
   </body>
</html>

以上是关于html 画布动画，保罗爱尔兰语，javascript，requestAnimationFrame的主要内容，如果未能解决你的问题，请参考以下文章

如何优化画布上的动画？ HTML 5

如何在 html 画布中获取动画方向？

使用 Delphi 的 HTML5 画布动画

使用画布的 HTML5 中的逐帧动画

HTML5 画布中的动画 GIF

在 HTML5 画布上动画绘制路径