<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 = {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上了
</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({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();
</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({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（）方法
</script>
