<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas width="1000" height="1000" id="canvas" style="background: black"> 您的当前浏览器版本不支持canvas标签 </canvas> <script type="text/javascript"> //获取canvas元素 var canvas=document.getElementById("canvas"); //设置2d绘图环境 var cxt=canvas.getContext("2d"); var time=0; function draw(){ //清除画布 cxt.clearRect(0,0,1000,1000); //轨道 for (var i = 0; i < 8; i++) { cxt.beginPath(); cxt.strokeStyle="#fff"; cxt.arc(500,500,50*(i+1),0,360,false); cxt.closePath(); cxt.stroke(); }; //太阳 cxt.beginPath(); var sunColor=cxt.createRadialGradient(500,500,0,500,500,20); sunColor.addColorStop(0,"#f00"); sunColor.addColorStop(1,"#f90"); cxt.fillStyle=sunColor; cxt.arc(500,500,20,0,360,false); cxt.closePath(); cxt.fill(); //画地球 cxt.save(); //设置异次元空间的原点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(time*360/365*Math.PI/180); cxt.beginPath(); var earthColor=cxt.createRadialGradient(0,-150,0,0,-150,10); earthColor.addColorStop(0,"#78B1E1"); earthColor.addColorStop(1,"#050C12"); cxt.fillStyle=earthColor; cxt.arc(0,-150,10,0,360,false); cxt.closePath(); cxt.fill(); cxt.restore(); //画水星 cxt.save(); //设置异次元空间的原点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(time*360/88*Math.PI/180); cxt.beginPath(); var mercuryColor=cxt.createRadialGradient(0,-50,0,0,-50,10); mercuryColor.addColorStop(0,"#A69697"); mercuryColor.addColorStop(1,"#5C3E40"); cxt.fillStyle=mercuryColor; cxt.arc(0,-50,10,0,360,false); cxt.closePath(); cxt.fill(); cxt.restore(); //画金星 cxt.save(); //设置异次元空间的原点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(time*360/225*Math.PI/180); cxt.beginPath(); var venusColor=cxt.createRadialGradient(0,-100,0,0,-100,10); venusColor.addColorStop(0,"#C4BBAC"); venusColor.addColorStop(1,"#050C12"); cxt.fillStyle=venusColor; cxt.arc(0,-100,10,0,360,false); cxt.closePath(); cxt.fill(); cxt.restore(); //画火星 cxt.save(); //设置异次元空间的原点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(time*360/687*Math.PI/180); cxt.beginPath(); var marsColor=cxt.createRadialGradient(0,-200,0,0,-200,10); marsColor.addColorStop(0,"#CEC9B6"); marsColor.addColorStop(1,"#76422D"); cxt.fillStyle=marsColor; cxt.arc(0,-200,10,0,360,false); cxt.closePath(); cxt.fill(); cxt.restore(); //画木星 cxt.save(); //设置异次元空间的原点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(time*360/4333*Math.PI/180); cxt.beginPath(); var jupiterColor=cxt.createRadialGradient(0,-250,0,0,-250,10); jupiterColor.addColorStop(0,"#C0A48E"); jupiterColor.addColorStop(1,"#322222"); cxt.fillStyle=jupiterColor; cxt.arc(0,-250,10,0,360,false); cxt.closePath(); cxt.fill(); cxt.restore(); //画土星 cxt.save(); //设置异次元空间的原点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(time*360/10759*Math.PI/180); cxt.beginPath(); var saturnColor=cxt.createRadialGradient(0,-300,0,0,-300,10); saturnColor.addColorStop(0,"#F7F9E3"); saturnColor.addColorStop(1,"#5C4533"); cxt.fillStyle=saturnColor; cxt.arc(0,-300,10,0,360,false); cxt.closePath(); cxt.fill(); cxt.restore(); //画天王星 cxt.save(); //设置异次元空间的原点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(time*360/30685*Math.PI/180); cxt.beginPath(); var uranusColor=cxt.createRadialGradient(0,-350,0,0,-350,10); uranusColor.addColorStop(0,"#A7E1E5"); uranusColor.addColorStop(1,"#19243A"); cxt.fillStyle=uranusColor; cxt.arc(0,-350,10,0,360,false); cxt.closePath(); cxt.fill(); cxt.restore(); //画海王星 cxt.save(); //设置异次元空间的原点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(time*360/60190*Math.PI/180); cxt.beginPath(); var neptuneColor=cxt.createRadialGradient(0,-400,0,0,-400,10); neptuneColor.addColorStop(0,"#0661B2"); neptuneColor.addColorStop(1,"#1E3B73"); cxt.fillStyle=neptuneColor; cxt.arc(0,-400,10,0,360,false); cxt.closePath(); cxt.fill(); cxt.restore(); time+=1; } //地球动起来 setInterval(draw,10); </script> </body> </html>
