前言
众所周知,地球绕着太阳公转,月球作为地球的卫星,绕着地球沿着一定的轨道在旋转,这儿用圆来模拟地球和月球的旋转轨道(实际为椭圆)。
正文
首先来分析,如何画一个绕着太阳不停旋转的地球。大家都知道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相应介绍链接
下面附上效果图以及源码下载链接
效果图:
源码下载链接:
源码下载链接