Canvas绘制星球轨迹移动

来源：互联网发布：论坛模板源码编辑：程序博客网时间：2024/04/27 21:09

在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用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>

步骤效果：

阅读全文

0 0