CraftyJS 学习四 -- 2D Graphics
CraftyJS 学习四 -- 2D Graphics
tonglei0429
发布于 2019-07-22 12:24:41
发布于 2019-07-22 12:24:41
2D 绘图
Crafty 可以轻松的绘制一个矩形，（Sprite 一样）。
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"事件
square.bind('EnterFrame', function(){ this.rotation = this.rotation + 1;
});如果你希望它以中心为轴旋转，可使用如下方法：（该方法继承自 2D 组件）
square.origin("center")完整最终代码为：
<!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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录