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(){};）
顺丰集团工作强度 116人发布
投递美团等公司10个岗位 >