原文链接：https://blog.csdn.net/wern0565/article/details/84660138

简单的太阳系动态特效

主要运用canvas
效果如

HTML

<canvas id="canvas" width="1000" height="1000" style="background-color:#000"> 您的浏览器不支持canvas标签 </canvas>

javascript

获取画板：var cxt = document.getElementById("canvas").getContext("2d");
画太阳和轨道

function drawTrack(){  
                cxt.beginPath();  
                cxt.arc(500,500,20,0,Math.PI*2,false);  
                cxt.closePath();  
                var sunColor = cxt.createRadialGradient(500,500,0,500,500,20);  
                sunColor.addColorStop(0,"#f00");  
                sunColor.addColorStop(1,"#f90");  
                cxt.fillStyle=sunColor;  
                cxt.fill();  
                for(var i=0;i<8;i++){  
                    cxt.beginPath();  
                    cxt.arc(500,500,(i+1)*50,0,Math.PI*2);  
                    cxt.closePath();  
                    cxt.strokeStyle="#fff"  
                    cxt.stroke();  
                }  
            }  
            drawTrack();  

行星

 function Star(x,y,r,clcye,sColor,eColor){  
                cxt.save();  
                cxt.translate(500,500);  
                cxt.rotate(time*Math.PI*2/clcye);  
                cxt.beginPath();  
                cxt.arc(x,y,r,0,Math.PI*2);  
                cxt.closePath();  
                var starColor = cxt.createRadialGradient(x,y,0,x,y,r);  
                starColor.addColorStop(0,sColor);  
                starColor.addColorStop(1,eColor);  
                cxt.fillStyle=starColor;  
                cxt.fill();  
                cxt.restore();  
            }  
              
            var time = 0;  
            function drawStar(){  
                cxt.clearRect(0,0,1000,1000);  
                drawTrack();  
                Star(0,-50,10,87.70,"#A69697","#5C3E40");   //水星  
                Star(0,-100,10,224.701,"#C4BBAC","#1F1315");    //金星  
                Star(0,-150,10,365.2422,"#78B1E8","#050C12");   //地球  
                Star(0,-200,10,686.98,"#CEC9B6","#76422D"); //火星  
                Star(0,-250,10,4332.589,"#C0A48E","#322222");   //木星  
                Star(0,-300,10,10759.5,"#F7F9E3","#5C4533");    //土星  
                Star(0,-350,10,30799.095,"#A7E1E5","#19243A");  //天王星  
                Star(0,-400,10,60152,"#0661B2","#1E3B73");  //海王星  
                  
                time += 1;  
            }  

动画setInterval(drawStar,10);通过定时器实现