// 第一步,要活的html上的某个元素的节点,比如某个div的节点
var elem = document.getElementById("content");
// 第二步,创建一个画布对象,并给画布的相关信息
var params = {width: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上了
// 在上一步练习后我们在创建可视区对象时就可以写成这样
var elem = document.getElementById("content");
var two = new Two({width: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();
var elem = document.getElementById("content");
var two = new Two({width: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()方法