码迷,mamicode.com
首页 > 其他好文 > 详细

太阳八大行星运行轨迹

时间:2017-05-23 20:33:22      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:设置   image   tran   环境   document   ++   func   log   doctype   

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

技术分享

太阳八大行星运行轨迹

标签:设置   image   tran   环境   document   ++   func   log   doctype   

原文地址:http://www.cnblogs.com/ldlx-mars/p/6895817.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!