two.js插件的简单用法

// 第一步，要活的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>

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

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>

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>