搜索
实验101.绘制小型太阳系模型动画实例：小型太阳系模型在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用CanvasAPI实现的动画实例——小型太阳系模型，由地球、月球和太阳组成。在漆黑的夜空中，地球围着太阳转、月球围绕地球转，界面如图6-59所示。要实现动画效果，除了绘图外，还需要解决下面两问题（1）定期绘图，也就是每隔一段时间就调用绘图函数进行绘图。动画当时多次绘图实现的，一次绘图只能实现静态图像。可以使用setInterval()方法设置一个定时器，语法如下：setInterval(函数名,时间间隔)时间间隔的单位是ms，每经过指定的时间间隔系统都会自动调用指定的函数。（2）清除先前绘制的所有图形。物体已经移动开来，可原来的位置上还保留先前绘制的图形，这样当然不行。解决这个问题最简单的方法是使用clearRect方法清除画布中的内容。本例使用的3个图片在设计小型太阳系模型动画实例之前需要准备3个图片分别用于表现地球、月球和太阳。本例的画面比较小，因此这3个图片不需要很精美。这里使用sun.png表现太阳、使用eartrh.png表现地球使用moon.png表现月球，图它们保存在images目录下首先定义一个Canvas元素画布的长和宽都是300，代码如下：!DOCTYPEhtmlhtmlheadtitleHTML5Canvas动画实例：小型太阳系模型/title/headbodycanvasid=canvasIdwidth=300height=300/canvas/body/htmlinit()函数在JavaScript代码中定义3个Image对象，分别用于显示sun.png、eartrh.png和moon.png。然后定义一个init()函数，初始化Image对象，并设置定时器，代码如下：scripttype=text/javascriptvarsun=newImage();varmoon=newImage();varearth=newImage();functioninit(){sun.src='images/sun.png';moon.src='images/moon.png';earth.src='images/earth.png';setInterval(draw,100);}……//此处省略draw()函数的代码window.addEventListener(load,init,true);/script1．绘制背景本例的背景就是漆黑的夜空，因此简单地画一个黑色的矩形就可以了，代码如下：functiondraw(){varctx=document.getElementById('canvasId').getContext('2d');ctx.clearRect(0,0,300,300);//清除canvas画布ctx.fillStyle='rgba(0,0,0)';ctx.fillRect(0,0,300,300);ctx.save();2．绘制太阳在画布的中心绘制太阳，代码如下：ctx.drawImage(sun,125,125,50,50);画布的中心为(150,150)，太阳图片的长和宽都为50，因此图像的左上角坐标为(125,125)（125=150-50/2）。3．绘制地球轨道假定地球轨道是以太阳为中心的半径为100的圆，绘制地球轨道代码如下：ctx.strokeStyle='rgba(0,153,255,0.4)';ctx.beginPath();ctx.arc(150,150,100,0,Math.PI*2,false);//地球轨道ctx.stroke();ctx.closePath();画布的中心为(150,150)，太阳图片的长和宽都为50，因此图像的左上角坐标为(125,125)（125=150-50/2）。4．绘制地球因为地球围绕着太阳转，所以在绘制地球之前，要进行下面几次平移和旋转操作。（1）平移至画布的中心（即站在太阳的角度看地球）。（2）根据当前的时间旋转一定的角度。（3）平移至地球轨道。绘制地球，代码如下：ctx.save();//绘制地球ctx.translate(150,150);//平移至画布的中心vartime=newDate();//获取当前时间//旋转一定的角度ctx.rotate(((2*Math.PI)/60)*time.getSeconds()+((2*Math.PI)/60000)*time.getMilliseconds());ctx.translate(105,0);//平移至地球轨道ctx.drawImage(earth,-12,-12);//绘制地球5．绘制月球ctx.save();ctx.rotate(((2*Math.PI)/6)*time.getSeconds()+((2*Math.PI)/6000)*time.getMilliseconds());ctx.translate(0,25);ctx.drawImage(moon,-3.5,-3.5);在绘制地球和绘制月球时都进行了平移和旋转操作。绘制之前都调用ctx.save()方法保存绘图状态。在绘制结束时需要2次恢复绘图状态，代码如下：ctx.restore();ctx.restore();