Canvas模拟地球，月球公转

前言

众所周知，地球绕着太阳公转，月球作为地球的卫星，绕着地球沿着一定的轨道在旋转，这儿用圆来模拟地球和月球的旋转轨道（实际为椭圆）。

正文

首先来分析，如何画一个绕着太阳不停旋转的地球。大家都知道context.arc(x,y,radius,0,2*Math.PI)这是canvas里面画圆的一个方法，那么要让圆动起来，并绕着一定的轨道旋转，实际上就是不断的改变圆心的坐标。那么就地球的旋转来讲，它的圆心坐标有什么规律呢？
由上图可以看出，当地球移动到下一个位置的
圆心坐标X=轨道圆心坐标X的值+轨道半径*cos(旋转角度)
同理，圆心坐标Y=轨道圆心坐标Y的值+轨道半径*sin(旋转角度)
ps:(以上旋转角度皆为弧度制)
这样，我们只有每次在画用的时候根据以上公式，那么就可以画出不断旋转的地球啦。

下面附上代码详解

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

var canvas = $("#myCanvas"),
            ctx = canvas.get(0).getContext("2d"),
            width = $(window).get(0).innerWidth,
            height = $(window).get(0).innerHeight;
        canvas.attr("width", width);
        canvas.attr("height", height);
        //当窗口尺寸发生变化时，执行changeSize方法。
        $(window).resize(changeSize); 
        function changeSize() {
            width = $(window).get(0).innerWidth;
            height = $(window).get(0).innerHeight;
            canvas.attr("width", width);
            canvas.attr("height", height);
        }

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

function Circle(origin, radius, augular) {
            this.origin = origin;//圆心
            this.radius = radius;//半径
            this.angle = 0;//初始角度
            this.augular = augular;//选转角度
            this.draw = drawCircle;//画圆方法
        }

//画圆方法
function drawCircle(context, fillStyle) {
            context.save();
            context.beginPath();
            context.fillStyle = fillStyle;
            context.strokeStyle="orange"
            context.lineWidth = 2;
            context.arc(this.origin.x, this.origin.y, this.radius, 0, 2 * Math.PI);
            context.stroke();
            context.fill();
            context.closePath();
            context.restore();
        }

//构造函数Point，用来创建圆心坐标(x,y)
function Point(x, y) {
            this.x = x;
            this.y = y;
        }

三、创建实例对象

var sunOrigin = new Point(400, 300); //太阳中心
var sun = new Circle(sunOrigin, 50, 0); //太阳
var earthPath = new Circle(sunOrigin, 200, 0); //地球路径
var earth = new Circle(new Point(earthPath.origin.x + earthPath.radius, earthPath.origin.y), 20, Math.PI / 180); //地球
var moonPath = new Circle(earth.origin, 80, earth.augular); //月球路径
var moon = new Circle(new Point(moonPath.origin.x + moonPath.radius, moonPath.origin.y), 10, Math.PI / 180); //月球

四、不断绘制

function animation() {
    ctx.clearRect(0, 0, width, height);//每次画之前都得清空画布，防止跟上次的叠加
    earthPath.draw(ctx, "white");//绘制地球旋转路径
    sun.draw(ctx, "red");//绘制太阳
    earth.origin.x = earthPath.origin.x +earthPath.radius * Math.cos(earth.angle);//地球圆心X坐标
    earth.origin.y = earthPath.origin.y +earthPath.radius * Math.sin(earth.angle);//地球圆心Y坐标
    earth.angle += earth.augular;//每次地球旋转augular度，在这儿，我设置成Math.PI/180，即每次旋转一度。
    moon.origin.x = moonPath.origin.x + moonPath.radius * Math.cos(moon.angle);//月球圆心X坐标
    moon.origin.y = moonPath.origin.y + moonPath.radius * Math.sin(moon.angle);//月球圆心Y坐标
    moonPath.draw(ctx, "white");//绘制月球路径
    earth.draw(ctx, "blue");//绘制地球
    moon.draw(ctx, "yellow");//绘制月球
    moon.angle += (moonPath.augular * 2)//月球旋转读书;
    window.requestAnimationFrame(animation);
        }
    //window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了，后者需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。
    window.requestAnimationFrame(animation);

window.requestAnimationFrame相应介绍链接

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

效果图：

源码下载链接:
源码下载链接