行星轨迹制作_Canvas绘制星球轨迹移动

在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用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对象，并设置定时器，代码如下

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

html>

步骤效果：