two.js的使用---月球绕地球转, 地球绕太阳转

two.js官网

• html 文件很简单, 只需一个盒子

<div id="draw-shapes"></div>

• js

几个需要注意的地方 ,
1: two.js 中, 图像默认的旋转中心是该图形的定位点( 图形的中心点 )
2. 如果需要旋转多个图形 , 则需要将这些图形归为一组( var group = two.makeGroup(o1, o2, ..., on) );
3. 分组之后 , 该组的旋转中心默认为画布左上角 , 即(0, 0)点;
4. 需要使用 group.translation.set(x, y); 平移旋转中心
5. 平移之后该组合中所有的图形的定位点都变为 (x, y) 需要重新进行定位
6. 如果一个组合里面还有一个需要旋转的图形(该例子中为地球组合中的月球) , 则先将月球单独归为一组, 使其绕地球旋转, 然后将地球,轨道,月球组 (注意: 这里是月球组 , 而不是单个月球) 归为一组 . 绕太阳旋转;
月球的最终定位由地球组决定.

var elem = document.getElementById('draw-shapes');
  var two = new Two({width: 600, height: 600, type: Two.Types.svg}).appendTo(elem);

  // 太阳
  var sun = two.makeCircle(300, 300, 80);
  sun.fill = '#f00';
  sun.noStroke();

  // 太阳轨道
  var sunTrack = two.makeCircle(300, 300, 220);
  sunTrack.stroke = '#ddd';
  sunTrack.noFill();

  // 地球
  var earth = two.makeCircle(220, 0, 30);
  earth.fill = '#00f';
  earth.noStroke();

  // 地球轨道
  var earthTrack = two.makeCircle(220, 0, 60);
  earthTrack.stroke = '#ddd';
  earthTrack.noFill();

  // 月球
  var moon = two.makeCircle(60, 0, 5);
  moon.fill = '#ff0';
  moon.noStroke();

  // 月球组合: 月球
  var mGroup = two.makeGroup(moon);
  mGroup.translation.set(220, 0); // 偏移位置相对于后面的地球组进行定位

  // 地球组合: 地球,轨道,月球组合
  var eGroup = two.makeGroup(earth, earthTrack, mGroup); // 月球组, 而不是单个月球
  eGroup.translation.set(300, 300);
  two.bind('update', function() {
    mGroup.rotation += 1*Math.PI/180; // 必须使用+=   每次旋转 1°
    eGroup.rotation += 1*Math.PI/180;
  }).play(); // .play()方法开启动画循环

  two.update();