Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <canvas width="1000" height="1000" id="canvas" style="background:#000;">
			您的浏览器不支持,请升级浏览器!
		</canvas>
            
          
!

CSS

            
              
            
          
!

JS

            
              //设置2d绘图环境
var ctx = document.getElementById("canvas").getContext("2d");

//轨道
function drawTrack(){
  for(var i = 0;i < 8;i++){
    ctx.beginPath();
    ctx.arc(500,500,(i+1) * 50,0,360,false);
    ctx.strokeStyle = "#fff";//设置笔触颜色
    ctx.stroke();
    ctx.closePath();
  }
}


//星球

function Star(x,y,radius,cycle,sColor,eColor){
  //画出星球需要的属性
  //星球的坐标点 星球的半径 星球的颜色(开始颜色、结束颜色)
  //公转周期
  
  //星球坐标点
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.cycle = cycle;
  this.eColor = eColor;
  this.sColor = sColor;
  
  
  this.color = null;//渐变颜色空对象
  this.time = 0;//设置一个计时器
  
  this.draw = function(){
    //save()可以这样理解 原来的画布内容不变 把save()和restore()之间的内容画好了 在塞进来
    ctx.save();//保存之前的画布内容
    ctx.translate(500,500);//重置0,0坐标点
    ctx.rotate(this.time * (360/this.cycle) * Math.PI / 180);//设置旋转角度
    
    //画星球
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.radius,0,360,false);
    ctx.closePath();
    
    //设置星球的填充颜色
    
    this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
    this.color.addColorStop(0,this.sColor);//渐变颜色开始点
    this.color.addColorStop(0,this.eColor);//渐变颜色结束点
    ctx.fillStyle = this.color;
    ctx.fill();//执行填充命令
    
    //填充星球
    
    
    ctx.restore();//恢复之前保存的画布内容
    this.time +=1;
  }
}

 //创建一个太阳对象的构造函数
function Sun(){
  Star.call(this,0,0,20,0,"#F00","#f90");
}
//创建一个水星的对象构造方法
function Mercury(){
  Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
}
//创建一个金星的对象构造方法
function Venus(){
  Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
}
//创建一个地球的对象构造方法
function Earth(){
  Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12");
}
//创建一个火星的对象构造方法
function Mars(){
  Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
}
//创建一个木星的对象构造方法
function Jupiter(){
  Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
}
//创建一个土星的对象构造方法
function Saturn(){
  Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
}
 //创建一个天王星的对象构造方法
function Uranus(){
  Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
}
//创建一个海王星的对象构造方法
function Neptune(){
  Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
}

 //创建太阳对象实例
var sun=new Sun();

//创建水星对象实例
var water=new Mercury();

//创建金星对象实例
var gold=new Venus();

//创建一个地球对象实例
var diqiu=new Earth();

//创建一个火星对象实例
var fire=new Mars();

//创建一个木星对象实例
var wood=new Jupiter();

//创建一个土星对象实例
var soil=new Saturn();

//创建一个天王星对象实例
var god=new Uranus();

//创建一个海王星对象实例
var sea=new Neptune();


 function move(){
   //清除画布
   ctx.clearRect(0,0,1000,1000);
   //画出轨道
   drawTrack();
   //画出每个星球
   sun.draw();
   water.draw();
   gold.draw();
   diqiu.draw();
   fire.draw();
   wood.draw();
   soil.draw();
   god.draw();
   sea.draw();
 }

//使个星球进行运动
setInterval(move,10);
            
          
!
999px

Console