1
<canvas id="canvas" width="1000" height="1000"></canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 var canvas = document.getElementById("canvas");
        var cxt = canvas.getContext('2d');
        var time = 0;
        var EarchRotate = 0;
        var MoonX = 0;
        var MoonY = 0;
        //行星轨道
        function starRoute(){
            for(var i=0; i<=8; i++){
                cxt.save();
                cxt.translate(500,500);
                cxt.strokeStyle = '#fff';
                cxt.beginPath();
                cxt.arc(0,0,i*55,0,2*Math.PI,false);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
            }
        }
        //创建Start类型(其实在js中是对象)
        function Star(name,x,y,r,startColor,endColor,revolution){
            this.name = name;          //星球名称
            this.x = x;                //圆心  x,y
            this.y = y;
            this.r = r;                //半径  r
            this.startColor = startColor;        //渐变 start,end
            this.endColor = endColor;
            this.revolution = revolution;//公转周期 revolution
        }
        Star.prototype = {
            constructor : Star,
            drawStar : function(){
                cxt.save();
                cxt.translate(500,500);
                //绘制渐变颜色
                var gradient = cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
                gradient.addColorStop(0,this.startColor);
                gradient.addColorStop(1,this.endColor);
                cxt.fillStyle = gradient;
                cxt.beginPath();
                if(this.name == '地球'){
                    //存储转动的角度,找到moon的旋转坐标
                    EarchRotate = time*360/this.revolution*Math.PI/180;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX