Two.js入门教程
项目中需要前端画svg图像，直接在html上写标签不太优雅，于是找到了Two.js这个第三方类库，使用其完成了开发任务后，分享下使用心得，就算是入门教程了。
其官方网站为https://two.js.org，上面只有一些简单的demo，接着就是api了，比较简单，不太适合新手入门。
要想画图，首先需要一个容器来放图像，可以通过设置一个div来作容器：
<body style="background-color: rgb(3,11,33)">
<div id="dashboard"></div>
</body>
然后就可以初始化一个svg画布了：
var elem = document.getElementById('dashboard');
var params = { fullscreen:true };
var _two = new Two(params).appendTo(elem);这样就得到了一个全屏的画布，以及_two这个对象。当然，也不是一定要全屏，这里的参数还可以接收width和height来指定长宽，值是数字。除此之外，还有type、ratio、autostart参数。type有webgl、canvas、svg，用于指定渲染类型。ratio用于指定webgl和canvas的图像比例。autostart接收true和false，用于让动画效果自动开始。
下面就先画一条直线：
var line = _two.makeLine(20,20,40,40);
line.stroke = '#fff';
line.linewidth=2;
_two.update();这样就得到了一条起点为(20,20)终点为(40,40)，颜色为白色，宽度为2px的直线。这里的_two.update()，是把这条直线显示在画布上，你可以画完一个图形就调用一下，也可以全画完再调用，后面的代码会省略这行。
再来一个圆：
var circle = _two.makeCircle(60,60,10);
circle.fill = '#fff';
circle.stroke = '#000';
circle.linewidth = 5;如此便得到了一个圆心为(60,60)直径为10px，白色黑边，边框宽度为5的圆。fill、stroke、linewidth是通用属性，fill代表图形内的颜色，stroke为边框颜色，linewidth为边框宽度。除了指定颜色，也可以传入'transparent'来代表透明色。后面这三个属性就不赘述了。
接着画一个圆弧：
var arc = _two.makeArcSegment(100,100,100,150,0.2*Math.PI,0.3*Math.PI);这样就得到了一个圆心是(100,100)，内半径为100，外半径为150，从0.2Pi到0.3Pi弧度的圆弧。
再画一个圆角矩形框：
var button = _two.makeRoundedRectangle(150,150, 100, 50, 10);这就是中心位置在(150,150)，宽100，高50，圆角弧度10的圆角矩形框。
同样可以画一个矩形框，使用makeRectangle，少传一个圆角弧度即可。
Two.js还支持画一个星形，多边形、椭圆、自定义直线图形、自定义曲线图形。
var star = _two.makeStar(400, 400, 200, 100, 10);这是一个中心为(400,400)，外半径200，内半径100，有10个角的星形。
var polygon = _two.makePolygon(800, 400, 50, 10);这是一个中心为(800,400)，半径50，10个边的多边形。
var ellipse= _two.makeEllipse(1000, 400, 50, 10);这是一个中心为(1000,400)，宽50，长10的椭圆形。
var curve = _two.makeCurve(1200, 400, 1300, 400, 1300, 600);
var path= _two.makePath(1200, 400, 1300, 400, 1300, 600);自定义曲线图形和自定义直线图形接收的都是点坐标，奇数位是横坐标，偶数位是纵坐标，可以是任意多个点，会根据提供的点坐标生成曲线图形或者直线图形。
还可以在画布上生成一段文字：
var text = _two.makeText("正常",100,200,{size:16,fill:"#d0cdcd",alignment:'left'});在(100,200)的中心位置就有了正常两个字，样式有16px的大小，#d0cdcd的颜色和左对齐。样式参数还支持：family-字体、leading-行高、fill-颜色、stroke-颜色（这两个属性都是一样的）、linewidth粗细、style-斜体（'normal'、‘italic’）、weight-粗细、decoration-下划线（‘none’、‘underlined’、‘strikethrough’）、baseline-垂直对齐（‘middle’、‘baseline’、‘top’）、visible-可见（bool值）、rotation-旋转、translation-变形。没说明的都是一个number。
如此，就介绍完了所有Two.js支持的图形，下面来介绍怎么给单个图形绑定事件。
$(circle._renderer.elem)
.css('cursor', 'pointer')
.click(e=> {
text.value = "故障";
_two.update();
});这样点击圆圈图形的时候，文字就变成了故障。记得要调用update()来更新画布。
如果需要同时对多个对象控制属性，就需要使用makeGroup来把他们组合起来：
var group = _two.makeGroup(rect,circle,ellipse);
group.visible = false;
_two.update();这样就把group里所有的图形隐藏了。
动画这里就不再赘述了，官方网站有demo。