【星辰大海】flytu.net进阶计划（一）2D地月系圆周运动
【星辰大海】flytu.net进阶计划（二）3D太阳系立体运动
想学html5,就弄了个域名。但是不知道该建成什么样子。练习代码的时候想起以前学OC时老师布置的一个作业：做个一地月系的模拟动画。于是就有了这个目标：模拟太阳系人类文明。形式还不确定，游戏有点难度，论坛貌似我付不起服务费，博客做不过博客园——哎，人生如此艰难！
不过，我们的征途是星辰大海——飞兔网【flytu.net】
涉及知识点：canvas、setInterval()、三角函数
代码：
<!DOCTYPE html> <html> <head> <title> Galaxy Engine </title> <script> function drawR(){ document.getElementById("h1").innerHTML = "Begin"; //地球参数 var pex ; var pey ; var oex = 480; var oey = 320; var re = 20; var Re = 240; var se = 0.01 var ae = 0; //月球参数 var pmx ; var pmy ; var omx = pex; var omy = pey; var rm = 6; var Rm = 40; var sm = 0.05 var am = 0; //fps var f = 1000/60; var can = document.getElementById("sceneCan"); var ctx = can.getContext("2d"); var ani = setInterval( function(){ pex = oex+(Re+80)*Math.cos(ae+=se);//偏移椭圆轨道 pey = oey+Re*Math.sin(ae); omx = pex;//月轨 omy = pey; pmx = omx+Rm*Math.cos(am+=sm); pmy = omy+Rm*Math.sin(am); ctx.clearRect(0,0,960,640); ctx.fillStyle = "blue"; ctx.beginPath(); ctx.arc(pex,pey,re,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); ctx.fillStyle = "gray"; ctx.beginPath(); ctx.arc(pmx,pmy,rm,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(oex,oey,30,0,Math.PI*2,true); ctx.closePath; ctx.fill(); } ,f) } </script> </head> <body> <canvas id = "sceneCan" width="960" height="640" style="border:1px solid #c3c3c3"> No support canvas! </canvas> <h1 id = "h1"> Creat a new world by Galaxy Engine! </h1> <button onclick = "drawR()"> Draw the Eath </button> </body> </html>
问题:
1）canvas的宽高缩了一般；
2)没有实现控制切换暂停和开始；
3）不用修改的部分（日）也要重绘，感觉很浪费资源；
4）am和ae会不会溢出？懒得改了)_(