two.js插件的简单用法

         <div id="content"></div>

         <script type="text/javascript" src="two.js"></script>

         <!-- <script src="./path-to-two/two.js"></script> -->

         <script type="text/javascript">

                   // 第一步，要活的html上的某个元素的节点，比如某个div的节点

                   var elem = document.getElementById("content");

                   // 第二步，创建一个画布对象，并给画布的相关信息

                   var params = {600,height:400,}; //创建一个宽为600高为400的可视区（画布）

                   // 第三部，通过two.js的方法创建这个画布节点

                   var two = new Two(params).appendTo(elem);//将这个可视区添加到div内

                   // 现在可以开始画东西了

                   // 先来画个圆

                   var circle = two.makeCircle(200,200,50);//横，纵坐标，半径

                   // 画完圆后，需要填充或者描边

                   // 填充样式

                   circle.fill = "#ff8000";

                   // 描边样式

                   circle.stroke = "#f00";

                   // 描边的线条宽度

                   circle.linewidth = 10;

                   // 切记，在画完后需要把话的内容更新到页面上

                   two.update();

                   // 这样就把一个圆画在成功画在id位content的div上了

         </script>

         <div id="content"></div>

         <script type="text/javascript" src="two.js"></script>

         <script type="text/javascript">

                   // 在上一步练习后我们在创建可视区对象时就可以写成这样

                   var elem = document.getElementById("content");

                   var two = new Two({600,hright:400}).appendTo(elem);

                   // 画一个圆 和 一个矩形

                   var circle = two.makeCircle(-100,0,50);

                   var rect = two.makeRectangle(100,0,100,100);

                   // 填充 描边

                   circle.fill = "#ff8000";

                   circle.stroke = "#f00";

                   rect.fill="rgba(0,200,255,0.75)";//用的是颜色的rgba方式

                   rect.stroke = "#1c75bc";

                   // 注意：现在我们需要将两个图像组合成一个图形，那么现在就要进行组合

                   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 = 10;

                    // 切记，不要忘记了更新到页面上

                    two.update();

         </script>

         <div id="content"></div>

         <script type="text/javascript" src="two.js"></script>

         <script type="text/javascript">

                   var elem = document.getElementById("content");

                   var two = new Two({600,hright:400}).appendTo(elem);

                   var circle = two.makeCircle(-70, 0, 50);

                   var rect = two.makeRectangle(70, 0, 100, 100);

                   circle.fill = '#FF8000';

                   rect.fill = 'rgba(0, 200, 255, 0.75)';

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

                   group.translation.set(two.width / 2, two.height / 2);

                   group.scale = 0;

                   group.noStroke();

                   // 简单的旋转动画

                   //  我们已经将两个图形组合成同一个图形了，那么我们只需要对这个组合的图形进行运动就可以；

                   two.bind("update",function(frameCount){  //这里将update的方法放在bind方法里

                            if(group.scale>0.9999){

                                     group.scale = group.rotation =0;

                            }

                            var t = (1-group.scale)*0.125;

                            group.scale += t;

                            group.rotation += t*4*Math.PI;

                   }).play(); //注意；如果要一直个更新到页面上的话 需要使用play（）方法

         </script>