<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
svg,canvas{
background: #111;
}
body{
text-align: center;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="two.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<script>
var options={
height:320,width:400,
type:Two.Types.svg
};
var two=new Two(options).appendTo(box);
const w=two.width,h=two.height;
var sun=two.makeCircle(0,0,50), earth=two.makeCircle(0,0,15),moon=two.makeCircle(0,0,4);
sun.fill="#f00";earth.fill="#00f";moon.fill='yellow';
var moonOrbit=two.makeCircle(0,-28,28);earthOrbit=two.makeCircle(w/2,h/2,125);
moonOrbit.stroke='#fff'; earthOrbit.stroke='#fff';
moonOrbit.fill='transparent'; earthOrbit.fill='transparent';
var moonGroup=two.makeGroup(moon,moonOrbit); //0,0
moonGroup.translation.set(0,28);
var group2=two.makeGroup(earth,moonGroup); //0,0
group2.translation.set(0,125);
var group1=two.makeGroup(sun,group2);
group1.translation.set(w/2, h/2);
two.bind('update',function(frameout){
group1.rotation+=0.5*Math.PI/180;
group2.rotation+=1*Math.PI/180;
}).play();
two.update();
</script>
</body>
</html>two.js畫地球自轉
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章