在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用Canvas API实现的动画实例——小型太阳系模型，由地球、月球和太阳组成。在漆黑的夜空中，地球围着太阳转、月球围绕地球转.


p （ 1 ）定期绘图，也就是每隔一段时间就调用绘图函数进行绘图。动画当时多次绘图实现的，一次绘图只能实现静态图像。 p 可以使用 setInterval () 方法设置一个定时器，语法如下：

setInterval(函数名,时间间隔)

p 时间间隔的单位是 ms ，每经过指定的时间间隔系统都会自动调用指定的函数。 p （ 2 ）清除先前绘制的所有图形。物体已经移动开来，可原来的位置上还保留先前绘制的图形，这样当然不行。解决这个问题最简单的方法是使用 clearRect 方法清除画布中的内容。 



p 在设计小型太阳系模型动画实例之前需要准备 3 个图片分别用于表现地球、月球和太阳。本例的画面比较小，因此这 3 个图片不需要很精美。这里使用 sun.png 表现太阳、使用 eartrh.png 表现地球使用 moon.png 表现月球，图它们保存在 images 目录下  在 JavaScript 代码中定义 3 个 Image 对象，分别用于显示 sun.png 、 eartrh.png 和 moon.png 。然后定义一个 init () 函数，初始化 Image 对象，并设置定时器，代码如下


本例的背景就是漆黑的夜空，因此简单地画一个黑色的矩形就可以了



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
      var sun=new Image();
      var earth=new Image();
      var moon=new Image();
      function init(){
        sun.src="img/sun.jpg";
        earth.src="img/earth.jpg";
        moon.src="img/moon.jpg";
        setInterval(draw,100);
      }
      function draw(){
        var c=document.getElementById("canvas");
        var ctx=c.getContext("2d");

        ctx.clearRect(0,0,500,500);
        ctx.fillStyle='rgba(0,0,0)';
        ctx.fillRect(0,0,500,500);
        ctx.save();
//        //3绘制太阳；
        ctx.drawImage(sun,200,200,50,50);
        //4.绘制地球的轨道;
        ctx.strokeStyle='red';
        ctx.beginPath();
        ctx.arc(225,225,150,2*Math.PI,false);
        ctx.stroke();
        ctx.closePath();

      }
      window.addEventListener("load",init(),true);
    </script>
  </body>
</html>


步骤效果：

Canvas绘制星球轨迹移动_strokeStyle