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 , 0 , 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 , 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(){

//太阳继承星球

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.2422 , "#78e1e8" , "#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 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 , 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);