CraftyJS 学习四 -- 2D Graphics

2019-07-22 12:24:41 浏览数 (1)

2D 绘图

Crafty 可以轻松的绘制一个矩形，（Sprite 一样）。

代码语言：javascript复制
Crafty.init(400, 400);var square = Crafty.e('2D, Canvas, Color');
square.attr({
  x: 10,
  y: 10,
  w: 100,
  h: 100}).color('red');

这段代码的意义：

  • 首先创建了 400*400 的舞台.
  • 然后我们创建了包含三种组件的实体 "2D, Canvas, Color". 所有希望显示出来的内容都需要 "2D" 组件及一个渲染层，在此我们使用 "Canvas" 作为渲染层。 "Color"组件用来绘制颜色。
  • 最后我们通过 .attr() 方法设置其大小位置等属性。

很容易吧！我们已经绘制了一个红色的矩形，现在我们要让它动起来，"2D"组件里面有个 rotation 属性，要让它旋转，我们可以通过绑定 "EnterFrame"事件

代码语言：javascript复制
square.bind('EnterFrame', function(){  this.rotation = this.rotation   1;
});

如果你希望它以中心为轴旋转，可使用如下方法：（该方法继承自 2D 组件）

代码语言：javascript复制
square.origin("center")

完整最终代码为：

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/craftyjs/Crafty/testing/dist/crafty-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<script type="text/javascript">
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;
});
</script>
</body>
</html>

看看效果！

可以尝试修改Enterframe 里面的代码，比如添加：this.x = x 1

canvas

0 人点赞