html5-canvas-太阳系2 主要应用技术： 1、canvas画线 2、canvas画圆 3、笔触修改和填充笔修改 4、制作渐变色 5、角度旋转 6、JS部分对象和方法（setInterval） 效果图; 代码; !DOCTYPE htmlhtmlhead lang=en meta charset=UTF-8 title/title/headbody canvas
html5-canvas-太阳系2主要应用技术：
1、canvas画线
2、canvas画圆
3、笔触修改和填充笔修改
4、制作渐变色
5、角度旋转
6、JS部分对象和方法（setInterval）
效果图;
代码;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background: #000">
您的浏览器不支持canvas标签，无法看到太阳系
</canvas>
<script>
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);
</script>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
相关文章
精彩导读
热门资讯
关注我们
