html不用画布太阳系示意图,html5-canvas-太阳系2

主要应用技术：

1、canvas画线

2、canvas画圆

3、笔触修改和填充笔修改

4、制作渐变色

5、角度旋转

6、JS部分对象和方法(setInterval)

效果图;

您的浏览器不支持canvas标签，无法看到太阳系

var canvas = document.getElementById('canvas');

var cxt = canvas.getContext('2d');

//画轨道

function drawTrack(){

for(var i = 0 ; i < 8 ; i++){

cxt.beginPath();

cxt.arc(500,500,(i + 1) * 50,360);

cxt.closePath();

cxt.strokeStyle = "#fff";

cxt.stroke();

}

}

drawTrack(); //调用画轨道方法

//星球类

function Star(x,y,radius,cycle,sColor,eColor){

//画出星球需要哪些属性

//星球的坐标点

this.x = x;

this.y = y;

//星球的半径

this.radius = radius;

//公转周期

this.cycle = cycle;

//星球的颜色(开始色，结束色)

this.sColor = sColor;

this.eColor = eColor;

//新建一个渐变颜色空对象

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,360,false);

cxt.closePath();

//设置星球的填充颜色

//新建渐变对象

this.color = cxt.createRadialGradient(this.x,this.x,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(){

//太阳继承星球

Star.call(this,20,"#f00","#f90");

}

//水星

function Mercury(){

//水星继承星球

Star.call(this,-50,10,87.70,"#a69697","#5c3e40");

}

//金星

function Venus(){

//金星继承星球

Star.call(this,-100,224.701,"#c4bbac","#1f1315");

}

//地球

function Earth(){

//地球继承星球

Star.call(this,-150,365.2422,"#78e1e8","#050c12");

}

//火星

function Mars(){

//火星继承星球

Star.call(this,-200,686.98,"#cec9b6","#76422d");

}

//木星

function Jupiter(){

//木星继承星球

Star.call(this,-250,4332.589,"#c0a48e","#322222");

}

//土星

function Saturn(){

//土星继承星球

Star.call(this,-300,10759.5,"#f7f9e3","#5c4533");

}

//天王星

function Uranus(){

//天王星继承星球

Star.call(this,-350,30799.095,"#a7e1e5","#19243a");

}

//海王星

function Neptune(){

//海王星继承星球

Star.call(this,-400,60152,"#0661b2","#1e3b73");

}

var sun = new Sun();

var mercury = new Mercury();

var venus = new Venus();

var earth = new Earth();

var mars = new Mars();

var jupiter = new Jupiter();

var saturn = new Saturn();

var uranus = new Uranus();

var neptune = new Neptune();

function move() {

//清除画布

cxt.clearRect(0,1000,1000);

//清除画布后要画出轨道

drawTrack();

sun.draw();

mercury.draw();

venus.draw();

earth.draw();

mars.draw();

jupiter.draw();

saturn.draw();

uranus.draw();

neptune.draw();

}

setInterval(move,10);