H5JS二维动画制做！two.js的基本操做class1

今天介绍一个网络上并不经常使用的插件two.js，刚开始学习的过程当中，发现网上并无合适的教程，在此发表基本操做

two.js是一款网页二维绘图软件，能够在指定区域内产生自设的各类动画效果

下载网址以下： https://two.js.org/#download

class1：

一：如何使用：

首先在页面中引入js文件：

    <script src="js/two.js" type="text/javascript" charset="utf-8"></script>

打开网页控制台console，输入Two，若是返回一个数组，证实已生效，如图：

建立一个div，做为选区

<div id="draw-shapes"></div>
        <style type="text/css">
            
            #draw-shapes{
                border: 1px  solid blue;
                width: 400px;
                height: 300px;
                background-color: green;
            }
            
    </style>    

在JS中选取上面的div

var elem = document.getElementById('draw-shapes');//选中页面上的div

二：建立空间与空间中的形状：

完成上述操做之后，进行建立二维空间操做

var params = { width: 300, height: 200 };//二维空间宽高（overflow hidden） 

var two = new Two(params).appendTo(elem);//新建一个在div中的二维空间

建立图形：

var circle = two.makeCircle(72, 100, 50);//建立圆形（x坐标，y坐标，半径）
var rect = two.makeRectangle(213, 100, 100, 100);//建立矩形（x，y，宽，高）

三：调整图形属性：

// 具体设置不一样的属性
        circle.fill = '#FF8000';//fill填充色
        circle.stroke = 'red'; // 边线颜色
        circle.linewidth = 5;//边线宽
        circle.opacity = 0.5;//透明度
        
        rect.fill = 'blue';
        rect.opacity = 0.75;
        rect.stroke = "white";
        rect.linewidth = 5;
　　　　 rect.noStroke();//去掉边线

四：投射到网页上：

将生成的空间，图形投射到网页上，须要输入以下指令：

two.update();

在网页中的效果如图所示

五：组的做用与创建：

组能够将数个图形合并到一个组中，一个组能够设置相同的属性与效果

在建立完图形以后，能够执行以下代码：

var group = two.makeGroup(circle, rect);

将两个图形放到一个组中

// 能够对组内全部形状进行属性设定
        group.translation.set(two.width / 2, two.height / 2);//让一个组内全部的形状位移，使中心保持在二维空间的什么位置
        group.rotation = Math.PI;//旋转
        group.scale = 0.75;//缩放
        
        group.linewidth = 7;//统一设置线宽

经过以上指令对组内全部形状进行相同的操做

 

 上图为操做后的两个形状的效果。

今天就先介绍这么多，下次会详细说明如何造成动画效果

学会了的小伙伴记得点赞哦！