HTML5 之Canvas绘制太阳系

<!DOCTYPE html>
<html>
<head>
    <title>HTML5_Canvas_SolarSystem</title>
    <!--简单 样式模版-->
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            font-family: YaHei Consolas Hybrid,宋体;
            font-size: 14px;
            list-style: none;
        }
        .wrapper
        {
            margin: 50px auto;
            width: 1000px;
            padding: 10px;
            border: solid 1px gray;
            background-color: #eee;
            overflow:auto;
        }/*H1浅蓝阴刻字*/
        body
        {
            background-color: gray;
        }
        h1
        {
            text-align: center;
            display: block;
            background-color: #C4DEF7;
            color: #344251;
            font: normal 30px "微软雅黑";
            text-shadow: 1px 1px 0px #DEF3FF;
            padding: 5px 0px;
            margin:10px;
            box-shadow: 0px 2px 6px #000;
            border-radius:10px;
        }

        #canvas { background-color:Black;}
        </style>
</head>
<body>
    <h1>
        HTML5 之 Canvas Demo SolarSystem
    </h1>
    <div class="wrapper">
    <canvas width="1000" height="1000" id="canvas"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            //初始化画面，并保存当前环境
            var initMap= function(){
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                ctx.save();
                ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
            }

            //画轨道
            var drawTrack = function () {
                for (var i = 0; i <= 8; i++) {
                    ctx.beginPath();
                    ctx.arc(0, 0, 60 * i, 0, 360, false);
                    ctx.closePath();
                    ctx.strokeStyle = "#fff";
                    ctx.stroke();
                }
            }

            //画星球的函数（圆心坐标，开始渐变色，结束渐变色，公转周期,开始天数）
            var drawPlanets = function (x, y, radius, sColor, eColor, cycle) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.sColor = sColor;
                this.eColor = eColor;
                this.cycle = cycle;
                this.days = 0;

                this.Draw = function () {
                    var angle = this.days * (360 / cycle);
                    ctx.save();
                    ctx.rotate(angle * Math.PI / 180);
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, 360, false);
                    ctx.closePath();
                    var planetStyle = ctx.createRadialGradient(this.x - 2, this.y, 0, this.x, this.y, this.radius);
                    planetStyle.addColorStop(0, this.sColor);
                    planetStyle.addColorStop(1, this.eColor);
                    ctx.fillStyle = planetStyle;
                    ctx.fill();
                    ctx.restore();
                    this.days++;
                }
            }

            //画太阳的类，继承drawPlanets
            function Sun() {
                drawPlanets.call(this, 0, 0, 20, "#F00", "#f90", 0);
            }
            //创建一个水星的对象构造方法
            function Mercury() {
                drawPlanets.call(this, 60, 0, 12, "#A69697", "#5C3E40", 87.70);
            }
            //创建一个金星的对象构造方法
            function Venus() {
                drawPlanets.call(this, 120, 0, 14, "#C4BBAC", "#1F1315", 224.701);
            }
            //创建一个地球的对象构造方法
            function Earth() {
                drawPlanets.call(this, 180, 0, 15, "#0FAFFC", "#005281", 365);
            }
            //创建一个火星的对象构造方法
            function Mars() {
                drawPlanets.call(this, 240, 0, 15, "#CEC9B6", "#76422D", 686.98);
            }
            //创建一个木星的对象构造方法
            function Jupiter() {
                drawPlanets.call(this,300, 0, 15, "#C0A48E", "#322222", 4332.589);
            }
            //创建一个土星的对象构造方法
            function Saturn() {
                drawPlanets.call(this,360, 0, 15, "#F7F9E3", "#5C4533", 10759.5);
            }
            //创建一个天王星的对象构造方法
            function Uranus() {
                drawPlanets.call(this,420, 0, 15, "#A7E1E5", "#19243A", 30799.095);
            }
            //创建一个海王星的对象构造方法
            function Neptune() {
                drawPlanets.call(this,480, 0, 15, "#0661B2", "#1E3B73", 60152);
            }

            //实例化出星球的对象
            var sun = new Sun();
            var earth = new Earth();
            var mercury = new Mercury();
            var venus = new Venus();
            var mars = new Mars();
            var jupiter = new Jupiter();
            var saturn = new Saturn();
            var uranus = new Uranus();
            var neptune = new Neptune();

            var move = function () {
                //初始化画布，并保存环境
                initMap();
                //绘制轨道
                drawTrack();
                //调用绘制星球的函数
                sun.Draw();
                earth.Draw();
                venus.Draw();
                mars.Draw();
                jupiter.Draw();
                saturn.Draw();
                uranus.Draw();
                mercury.Draw();
                neptune.Draw();
                //返回到开始保存的环境
                ctx.restore();

            }
            move();
            //启动定时器，开始绘制
            window.setInterval(move, 80);

        </script>
    </div>
</body>
</html>

效果图：