Canvas-太阳系_牛客博客

效果预览

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>太阳系</title>
    <script src="js/jquery.js"></script>
    <script src="js/sun_system.js"></script>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="display: block;margin: 0 auto; background:#000;">
    您的浏览器不支持canvas
</canvas>
</body>
</html>

JS脚本代码

$(function () {
   var cxt=document.getElementById('canvas').getContext('2d');
   //轨道
    function drawTrack() {
        for(var i=0;i<8;i++){
            cxt.beginPath();
            cxt.arc(500,500,(i+1)*50,0,360,false);
            cxt.closePath();
            //设置笔触的颜色
            cxt.strokeStyle='white';
            cxt.stroke();
        }
    }
    drawTrack();
   //星球
    function drawStar(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(500,500);
            //设置旋转角度
            cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
            //恢复之前保存的画布内容
            //画星球
            cxt.beginPath();
            cxt.arc(this.x,this.y,this.radius,0,360,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() {
        drawStar.call(this,0,0,25,0,'#EE230D','#FFB200');
    }
    //创建一个水星的对象构造方法
    function Mercury() {
        drawStar.call(this,0,-50,8.4,87.70,'#A69697','#5C3E40');
    }
    //创建一个金星的对象构造方法
    function Venus() {
        drawStar.call(this,0,-100,13.2,224.701,'#C4BBAC','#1F1315');
    }
    //创建一个地球的对象构造方法
    function Earth() {
        drawStar.call(this,0,-150,15,365.224,'#78B1E8','#050C12');
    }
    //创建一个火星的对象构造方法
    function Mars() {
        drawStar.call(this,0,-200,12,686.98,'#CEC9B6','#76422D');
    }
    //创建一个木星的对象构造方法
    function Jupiter() {
        drawStar.call(this,0,-250,24,4332.589,'#C0A48E','#322222');
    }
    //创建一个土星的对象构造方法
    function Saturn() {
        drawStar.call(this,0,-300,23,10759.5 ,'#F7F9E3','#5C4533');
    }
    //创建一个天王星的对象构造方法
    function Uranus() {
        drawStar.call(this,0,-350,21,30799.095,'#A7E1E5','#19243A');
    }
    //创建一个海王星的对象构造方法
    function Neptune() {
        drawStar.call(this,0,-400,20,164.8*365,'#0661B2','#1E3B73');
    }
    //创建太阳对象实例
    var sun=new sun();
    //创建水星对象实例
    var water = new Mercury();
    //创建金星对象实例
    var gold = new Venus();
    //创建地球对象实例
    var diqiu = new Earth();
    //创建火星对象实例
    var huo = new Mars();
    //创建木星对象实例
    var mu = new Jupiter();
    //创建土星对象实例
    var tu = new Saturn();
    //创建天王星对象实例
    var tian = new Uranus();
    //创建海王星对象实例
    var hai = new Neptune();

    function play(){
        //清除画布
        cxt.clearRect(0,0,1000,1000);
        //画出轨道
        drawTrack();
        //画出星球
        sun.draw();
        water.draw();
        gold.draw();
        diqiu.draw();
        huo.draw();
        mu.draw();
        tu.draw();
        tian.draw();
        hai.draw();
    }
    //让星球动起来
    setInterval(play,10);
});

注：需要引用jQuery文件（也可自己写一行JS代码即可window.οnlοad=function(){};）