html5实现的canvas太阳系
效果：
代码：
<!doctype html>
<html>
<head>
<title>太阳系</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background-color:#000">
您的浏览器不支持canvas标签
</canvas>
<script>
var cxt = document.getElementById("canvas").getContext("2d");
//画太阳和轨道
function drawTrack(){
cxt.beginPath();
cxt.arc(500,500,20,0,Math.PI*2,false);
cxt.closePath();
var sunColor = cxt.createRadialGradient(500,500,0,500,500,20);
sunColor.addColorStop(0,"#f00");
sunColor.addColorStop(1,"#f90");
cxt.fillStyle=sunColor;
cxt.fill();
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,Math.PI*2);
cxt.closePath();
cxt.strokeStyle="#fff"
cxt.stroke();
}
}
drawTrack();
//行星
function Star(x,y,r,clcye,sColor,eColor){
cxt.save();
cxt.translate(500,500);
cxt.rotate(time*Math.PI*2/clcye);
cxt.beginPath();
cxt.arc(x,y,r,0,Math.PI*2);
cxt.closePath();
var starColor = cxt.createRadialGradient(x,y,0,x,y,r);
starColor.addColorStop(0,sColor);
starColor.addColorStop(1,eColor);
cxt.fillStyle=starColor;
cxt.fill();
cxt.restore();
}
var time = 0;
function drawStar(){
cxt.clearRect(0,0,1000,1000);
drawTrack();
Star(0,-50,10,87.70,"#A69697","#5C3E40"); //水星
Star(0,-100,10,224.701,"#C4BBAC","#1F1315"); //金星
Star(0,-150,10,365.2422,"#78B1E8","#050C12"); //地球
Star(0,-200,10,686.98,"#CEC9B6","#76422D"); //火星
Star(0,-250,10,4332.589,"#C0A48E","#322222"); //木星
Star(0,-300,10,10759.5,"#F7F9E3","#5C4533"); //土星
Star(0,-350,10,30799.095,"#A7E1E5","#19243A"); //天王星
Star(0,-400,10,60152,"#0661B2","#1E3B73"); //海王星
time += 1;
}
setInterval(drawStar,10);
</script>
</body>
</html> 相关推荐
liulinsp 2020-01-09
淡风wisdon大大 2019-07-01
最近闲下来，开始了HTML5的入门之旅。跟着某视频做了两个简单的canvas例子。此处为简易太阳系模型实例。<canvas width="800" height="800" id="sunClass&
Abudula 2014-10-08
makeWorks 2019-06-20
snmplink 2017-12-15
无人机wikipedia 2018-05-18
xxmzumeng 2014-11-25
中国科普博览 2018-01-31
我在国博讲故事 2018-01-30
心理学哲学批判性思维 2018-01-20
心理学哲学批判性思维 2018-01-20
心理学哲学批判性思维 2018-01-19
无人机日常 2018-01-19
如何认真地活着 2018-01-17
春哥聊天 2018-01-17
天文八卦学 2018-01-16
天文八卦学 2018-01-16
黑白漫文化 2018-01-15