SVG-TWO.JS

TWO.JS下载网址:https://two.js.org/#download

基本用法：

1.下载TWO.JS并添加到你的HTML文档中<head></head>

  <script src="res/two.js"></script>

2.控制台输入console.log(Two)，返回下面函数，证明引入成功

ƒ (options) {

    // Determine what Renderer to use and setup a scene.

    var params = _.defaults(options || {}, {
      fullscreen: false,
       640,
      height: 480,
      type: Two.Types…

绘制第一个形状

<script>
  var elem=document.getElementById("c");
//  设置SVG宽高
  var params={300,height:300};
//  创建TWO构造函数，插入页面容器
  var two=new Two(params).appendTo(elem);
//创建矩形
  var rect=two.makeRectangle(213,100,100,100);
//  创建圆
  var circle=two.makeCircle(50,200,100);
//  矩形，圆填充
  circle.fill="rgb(0,200,200)";
  rect.fill="rgb(0,200,255)";
//  矩形，圆描边,描边宽度
  circle.lineidth=5;
  circle.stroke="blue";
  rect.stroke="blue";
//呈现到页面上
  two.update()
</script>

创建组，group管理更加方便

<script>
  var elem=document.getElementById("c");
//  设置SVG宽高
  var params={500,height:500};
//  创建TWO构造函数，插入页面容器
  var two=new Two(params).appendTo(elem);
//创建矩形
  var rect=two.makeRectangle(213,100,100,100);
//  创建圆
  var circle=two.makeCircle(100,200,100);
//  矩形，圆填充
  circle.fill="rgb(0,200,200)";
  rect.fill="rgb(0,200,255)";
//  矩形，圆描边,描边宽度
  circle.lineidth=5;
  circle.stroke="blue";
  rect.stroke="blue";
//  添加到组中，管理跟方便
  var group=two.makeGroup(circle,rect);
//  设置组的，y
  group.translation.set(two.width/2,two.height/2);
//  组旋转90度
  group.rotation=Math.PI/2;
//  组缩小0.75倍
  group.scale=0.75;
//组内线条宽度
  group.linewidth=10;
//呈现到页面上
  two.update()
</script>

简单运动：

two.on("update",function(){}) two.play();每秒执行60次update

  var elem=document.getElementById("c");
//  设置SVG宽高,类型是SVG,还是Canvas
  var params={800,height:500,type:Two.Types.canvas};
//  创建TWO构造函数，插入页面容器
  var two=new Two(params).appendTo(elem);
//创建矩形
//  var rect=two.makeRectangle(600,200,200,200);
  var rect=two.makeRectangle(200,0,200,200);
//  创建圆
//  var circle=two.makeCircle(200,200,100);
  var circle=two.makeCircle(-200,0,100)
//  矩形，圆填充
  //  矩形，圆描边,描边宽度
  circle.fill="rgb(0,200,200)";
  circle.opacity=0.7;
  circle.linewidth=5;
  circle.stroke="blue";

  rect.stroke="#2bf";
  rect.fill="#2bf";


//  添加到组中，管理跟方便
  var group=two.makeGroup(circle,rect);
//  设置组的x，y（也是旋转中心）
  group.translation.set(two.width/2,two.height/2);
//  组旋转90度
//  group.rotation=Math.PI/2;
//  组缩小0.75倍
//  group.scale=0.75;
//组内线条宽度
//  group.linewidth=10;
  var i=0;
  var deg=0;
  two.on("update",function(){
    deg+=3;
    group.rotation=deg*Math.PI/180;
    console.log(i)
  })
two.play()

注意：

一个组的旋转中心设置后，如果想按照中心旋转，组内成员坐标要还原到该有的位置