Canvas模拟地球,月球公转

前言

众所周知,地球绕着太阳公转,月球作为地球的卫星,绕着地球沿着一定的轨道在旋转,这儿用圆来模拟地球和月球的旋转轨道(实际为椭圆)。
原博客链接:http://blog.csdn.net/litong94/article/details/52964698

####正文
首先来分析,如何画一个绕着太阳不停旋转的地球。大家都知道context.arc(x,y,radius,0,2*Math.PI)这是canvas里面画圆的一个方法,那么要让圆动起来,并绕着一定的轨道旋转,实际上就是不断的改变圆心的坐标。那么就地球的旋转来讲,它的圆心坐标有什么规律呢?

Canvas模拟地球,月球公转
由上图可以看出,当地球移动到下一个位置的
圆心坐标X=轨道圆心坐标X的值+轨道半径cos(旋转角度)
同理,圆心坐标Y=轨道圆心坐标Y的值+轨道半径
sin(旋转角度)

ps:(以上旋转角度皆为弧度制)[color=#e36c09][/color]

这样,我们只有每次在画用的时候根据以上公式,那么就可以画出不断旋转的地球啦。

下面附上代码详解

一、首先获取画布,并让画布满屏,当页面尺寸发生变化时,画布宽度能够自适应

javascript 代码

二、定义构造函数Circle,用来创建相应的对象

javascript 代码

javascript 代码

javascript 代码

三、创建实例对象

javascript 代码

四、不断绘制
javascript 代码

window.requestAnimationFrame相应介绍链接

下面附上效果图以及源码下载链接

效果图:

Canvas模拟地球,月球公转
源码下载链接:
https://github.com/litong9406/canvas

» 本文来自:前端开发者 » 《Canvas模拟地球,月球公转》
» 本文链接地址:https://www.rokub.com/8844.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!