首页手记用HTML5的canvas画太阳系

用HTML5的canvas画太阳系

标签：

Html/CSS Html5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <canvas id="canvas" width="1300px" height="1300px" style="background:#000"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var cxt = canvas.getContext("2d");      
        var Sun=new Sun();
        var Mercury=new Mercury(); 
        var Venus=new Venus(); 
        var Earth=new Earth(); 
        var Mars=new Mars(); 
        var Jupiter=new Jupiter(); 
        var Saturn=new Saturn(); 
        var Uranus=new Uranus(); 
        var Neptune=new Neptune();  

        //画轨迹路线
        function drawTrack(){
            for(var i=0;i<8;i++){
                cxt.beginPath();
                cxt.strokeStyle="#fff";
                cxt.arc(650,650,(i+1)*60,0,2*Math.PI,false);
                cxt.closePath();
                cxt.stroke();
            }
        }
        drawTrack();
        function star(x,y,radius,cycle,scolor,ecolor){
            this.x=x;
            this.y=y;
            this.radius=radius;
            this.scolor=scolor;
            this.ecolor=ecolor;
            this.cycle=cycle;
            this.color=null;
            this.time=0;
            this.draw=function(){
                cxt.save();
                cxt.translate(650,650);
                cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
                cxt.beginPath();
                cxt.arc(this.x,this.y,this.radius,0,2*Math.PI,false);
                cxt.closePath();
                this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
                this.color.addColorStop(0,this.scolor);
                this.color.addColorStop(1,this.ecolor);
                cxt.fillStyle=this.color;
                cxt.fill();
                cxt.restore();
                this.time++;
            }
        }
        //画球
        function Sun(){
            star.call(this,0,0,20,0,"#FFFF00","#FF9900");
        }
        function Mercury(){
            star.call(this,0,-60,6,87.70,"#A69697","#5C3E40");
        }
        function Venus(){
            star.call(this,0,-120,8,224.701,"#C4BBAC","#1F1315");
        }
        function Earth(){
            star.call(this,0,-180,10,365.2422,"#78B1E8 ","#050C12");
        }
        function Mars(){
            star.call(this,0,-240,6,686.98,"#CEC9B6","#76422D");
        }
        function Jupiter(){
            star.call(this,0,-300,16,4332.589,"#C0A48E","#322222");
        }
        function Saturn(){
            star.call(this,0,-360,14,10759.5,"#F7F9E3","#5C4533");
        }
        function Uranus(){  
            star.call(this,0,-420,12,30799.095,"#A7E1E5","#19243A");
        }
        function Neptune(){    
            star.call(this,0,-480,10,60152,"#0661B2","#1E3B73");
        }
        //转动
        function move(){
            cxt.clearRect(0,0,1300,1300);
            drawTrack();
            Sun.draw();
            Mercury.draw();
            Venus.draw();
            Earth.draw();
            Mars.draw();
            Jupiter.draw();
            Saturn.draw();
            Uranus.draw();
            Neptune.draw();
        }
        setInterval(move,10);
    </script>
</body>
</html>