太陽八大行星運行軌跡

<!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>

相關文章
相關標籤/搜索