html 基本画布动画，javascript，requestAnimationFrame，太阳系

Posted

tags:

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

<html>
   <head>
      <style type="text/css">
         /*canvas{ width: 300px; height: 300px;}*/
      </style>
   </head>
   <body>

      <canvas id="canvas" width="300" height="300"></canvas>
      
      <script type ="application/javascript" language="javascript">

         window.requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame ||
               window.oRequestAnimationFrame ||
               window.msRequestAnimationFrame ||
               function( /* function */ callback, /* DOMElement */ element) {
                  window.setTimeout(callback, 1000 / 60);
            };
         })();

         var sun = new Image();
         var moon = new Image();
         var earth = new Image();

         init();
         animate();

         function init() {
            sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
            moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
            earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
            // setInterval(draw, 100);
         }

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

         function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');

            ctx.globalCompositeOperation = 'destination-over';
            ctx.clearRect(0, 0, 300, 300); // clear canvas

            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.save();
            ctx.translate(150, 150);

            // Earth
            var time = new Date();
            ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
            ctx.translate(105, 0);
            ctx.fillRect(0, -12, 50, 24); // Shadow
            ctx.drawImage(earth, -12, -12);

            // Moon
            ctx.save();
            ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
            ctx.translate(0, 28.5);
            ctx.drawImage(moon, -3.5, -3.5);
            ctx.restore();

            ctx.restore();

            ctx.beginPath();
            ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
            ctx.stroke();

            ctx.drawImage(sun, 0, 0, 300, 300);
         }
      </script>
   </body>
</html>

以上是关于html 基本画布动画，javascript，requestAnimationFrame，太阳系的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript实例：运动的小球

使用画布和 JavaScript 的嵌套动画

Javascript画布动画（棒图运动）

更新——Canvas画布动画效果之实现倒计时

如何将另一个矩阵雨代码动画添加到我的画布动画中？

工件出现在 iOS 上动态生成的动画画布图像上