canvas基础动画及优化

闲来无事，整理下这段时间做动画遇到的问题，同时分享一下经验。
最开始的需求是做一个夹娃娃的活动页面。用css3-transform（translate3d）的时候发现在苹果手机上面页面会有闪动，这个解决办法请参考这篇文章。基友于是推荐我使用canvas实现动画，所以才有下面的研究：
先直接上代码，后面再解释。
1.直线运动：可以直接拉去运行

 你的浏览器不支持canvas，请跟换其他浏览器试一试

效果如图：

image.png

2.环绕运动：

 你的浏览器不支持canvas，请跟换其他浏览器试一试

image.png

分析：
canvas动画就是一个不停 绘制-清除-绘制-清除的过程。所以每次绘制前都需要clearRect
矩形绘制：
rect(x,y,w,h)：x、y为起始坐标，w、h为矩形的宽、高
fillRect(x,y,w,h)：参数同上（本例子用的这个）
区别：上面只绘制、不填充，fillRect()填充

圆形绘制：
arc(x,y,r,sa,ea,true/false)：x、y为圆心坐标，r为半径，sa、ea分 别为起始角度和结束角度，最后一个参数为true时，顺时针画圆，false 则逆时针画圆；

第一个例子的运动很简单，就是使用定时器动态改变 x轴坐标值
第二个例子的环绕运动，则主要是用到旋转，这里为了方便，直接使用translate改变了画布的原点。然后清除画布的时候把前两个参数改下就好了，后面两个参数是画布的宽高不用动 ctx.clearRect(x,y,w,h)--x，y是原点。w，h是宽高
还有一点需要注意的是save和restore，这两个方法分别用来保存、恢复canvas的状态 ，无参数；比如第二个例子中，太阳和轨道是静止不动的，我们绘制完之后，要先save起来，然后旋转画布来绘制地球，实现地球的环绕运动。每次绘制地球后，都要使用restore方法恢复显示 太阳和轨道。

上面两个动画很简单，但是发现动画会抖动，所以我们下面不用定时器，用requestAnimationFrame来优化，本文参考网址：http://www.webhek.com/post/requestanimationframe.html
直接上代码：

3.基于上面的环绕运动，下面做了个拓展。月亮绕地球转，地球自转：
(ps:上面代码地球的公转用的是旋转画布，下面地球的公转和月亮的公转用的是 根据角度，sin和cos算出其（x,y）圆心坐标，地球的自转用的是旋转画布)
代码：

image.png

注意事项：
为了实现地球的自转，当在draw函数里面转移画布的原点时，新的坐标一定是相对此次原点来的，比如说我上面的代码，在函数开始之前，把画布中心转移到了太阳的中心，但是要在这基础上转移到地球的中心，就只需要算出地球中心到太阳中心的横竖距离，不需要加上太阳中心相对画布左上角的距离