sun

最新推荐文章于 2024-09-13 21:42:20 发布
yl107
最新推荐文章于 2024-09-13 21:42:20 发布
阅读量271
点赞数
本文链接：https://blog.csdn.net/yl107/article/details/75208266
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>太阳系</title>
        <style type="text/css">
            #mycanvas{
                display: block;
                margin:0 auto;
            }
        </style>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="1000" style="background: #000;"></canvas>
    <script type="text/javascript">
        var mycanvas = document.getElementById('mycanvas');
        var ctx = mycanvas.getContext('2d');
        // 轨道
        function drawtrack(){
            for(var i =0; i<8; i++){
                ctx.beginPath();
                ctx.arc(500,500,(i+1)*50,Math.PI*2,false);
                ctx.closePath();
                ctx.strokeStyle = 'white';
                ctx.stroke();
            }
        }
        drawtrack();
        // 星球
        // 星球位置、半径、公转周期、开始颜色、结束颜色
        function Planet(x,y,r,cycle,scolor,ecolor){
            this.x = x;
            this.y = y;
            this.r = r;
            this.cycle = cycle;
            this.scolor = scolor;
            this.ecolor = ecolor;
            // 设置一个空对象承接渐变的颜色
            this.index = null;
            // 设置一个变量，通过改变这个变量触发计时器
            this.time = 0;
            // 画星球的方法
            this.draw = function(){
                ctx.save();
                ctx.translate(500,500);
                ctx.rotate(this.time*(360/this.cycle)*Math.PI/180);
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
                this.index = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
                this.index.addColorStop(0,this.scolor);
                this.index.addColorStop(1,this.ecolor);
                ctx.fillStyle = this.index;
                ctx.fill();
                ctx.closePath();
                ctx.restore();
                this.time++;
            }
        }
        // 行星
        function Sun(){
            //使用call函数，sun就继承了就能够使用plane的draw方法。
            Planet.call(this,0,0,20,0,'red','orangered');
        }
        //水星
        function Mercury(){
            Planet.call(this,0,-50,10,87,'#A69697','#5c3e40');
        }
        //金星
        function Venus(){
            Planet.call(this,0,-100,15,224,'#c4bbac','#1f1315');
        }
        function Earth(){
            Planet.call(this,0,-150,20,365,'#78b1e8','#050c12');
        }
        function Mars(){
            Planet.call(this,0,-200,15,686,'#cec9b6','#76422d');
        }
        //木星
        function Jupiter(){
            Planet.call(this,0,-250,18,4332,'#c0a48e','#322222');
        }
        //土星
        function Saturn(){
            Planet.call(this,0,-300,15,10759,'#e7f9e3','#5c4533');
        }
        //天王星
        function Uranus(){
            Planet.call(this,0,-350,10,30799,'#a7e1e5','#19243a');
        }
        //海王星
        function Neptune(){
            Planet.call(this,0,-400,10,60152,'#0661b2','#1e3b73');
        }
        //实例化对象
        var sun=new Sun();
        var waters=new Mercury();           
        var gold=new Venus();
        var earth=new Earth();
        var  fire=new Mars();
        var  mu=new Jupiter();
        var tu=new Saturn();
        var tianwang=new Uranus();
        var haiwang=new Neptune();

        // 行星继承星球，调用星球的方法，不断进行绘制
        setInterval(move,10);
        function move(){
            ctx.clearRect(0,0,1000,1000);
            drawtrack();
            waters.draw();
            sun.draw();
            gold.draw();
            earth.draw();
            fire.draw();
            mu.draw();
            tu.draw();
            tianwang.draw();
            haiwang.draw();
        }
    </script>
</body>
</html>