2D 绘图

使用 Crafty 展示一个简单的方块是很容易的。(在完整的游戏中你可能想用的是精灵而不是方块，但它们作为功能展示还是很有用的，所以我们会在后续的例子中继续使用它们。)

Crafty.init(400, 400);
var square = Crafty.e('2D, Canvas, Color');
square.attr({
  x: 10,
  y: 10,
  w: 100,
  h: 100
}).color('red');

现在发生了什么?

• 首先我们使用 Crafty 初始化了一个400像素宽，400像素高的舞台。
• 然后使用这三个组件创建了一个实体: "2D, Canvas, Color"。任何可显示的实体都需要一个 "2D" 组件和一种渲染方式（Canvas或者DOM），这里我们使用 "Canvas" 渲染。"Color" 组件用来绘制方块的颜色。
• 最后我们使用 .attr() 函数设置了实体的几个属性，在这个例子中我们设置的是实体的位置和尺寸。和大多数函数一样，, attr() 返回调用它的实体本身, 所以你可以链式的调用实体的 color() 方法设置实体的颜色。

非常简单! 现在我们在页面上绘制了一个红色的方块，但是如何才能让它运动起来呢？例如，我们想让盒子旋转起来；如果你看了 "2D" 组件的文档介绍，你会发现它有一个 rotation 属性，但我们如何利用它来制作动画呢？非常简单:我们可以绑定 "EnterFrame" 事件，在每一帧改变实体的 rotation 属性值:

square.bind('EnterFrame', function(){
  this.rotation = this.rotation + 1;
});

现在我们绑定了 "EnterFrame" 事件，它在每一帧都会触发，所以方块会旋转起来。

默认情况下它会以实体的左上角为中心进行旋转，但我们希望的是围绕实体的中心进行旋转。我们可以设置旋转的中心点（这个方法由 "2D" 组件提供）：

square.origin("center")

现在我们把所有的代码放在一起，最终的代码是这样的:

Crafty.init(400, 400);

var square = Crafty.e('2D, Canvas, Color');
square.attr({
  x: 10,
  y: 10,
  w: 100,
  h: 100
}).color('red');

square.origin("center")

square.bind('EnterFrame', function(){
  this.rotation = this.rotation + 1;
});

下方是演示代码!

JS Bin

上边的脚本是可编辑的，试着在 "EnterFrame" 中增加代码 this.x = this.x+1; 让方块向右侧移动。