CraftyJS 学习四 -- 2D Graphics

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Unity游戏开发

Unity-UI(UGUI详解)02.1 Canvas组件、Visual组件

Canvas组件代表UI被放置和渲染的虚拟空间。全部的UI元素必须是带有Canvas组件的Gameobject的子物体。当我们创建一个UI元素从菜单的时候,如果...

21410
来自专栏计算机图形学 前端可视化 WebGL

FireFox下Canvas使用图像合成绘制SVG的Bug

所有的事情都会有一个起因。 最近产品上需要做一个这样的功能:给一些图形进行染色处理。想想这还不是顺手拈来的事情,早就研究过图形染色的技术。于是我把之前写好的两种...

6010
来自专栏汪宇杰博客

打造一把UWP像素尺

在特定应用里,我们需要用标尺来标识屏幕上的像素。然而唯一内置的尺是在InkToolbar控件里的,我们没法拿出来用。今天我就教大家如何自己打造一把UWP引用里随...

8420
来自专栏腾讯技术工程官方号的专栏

卡牌特效: svg不规则倒计时动效

? 导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞PC官网上实现一种卡牌效果,在不规则图片上叠加倒计时效果。前端项目中,...

18030
来自专栏某熊的全栈之路

fc-whiteboard,支持镜像、录播、回放的 Web 电子白板

在很多培训、协作、在线演讲的场景下,我们需要有电子白板的功能,能够方便地在演讲者与听众之间共享屏幕、绘制等信息。fc-whiteboard https://pa...

15820
来自专栏深圳java培训

深圳Java培训:使用JS实现简单喷泉效果

最近,在教学生使用JS的基本操作,为了练习JS的基本作用,特地写了一个喷泉效果,代码如下:

7200
来自专栏计算机图形学 前端可视化 WebGL

FireFox下Canvas使用图像合成绘制SVG的Bug

所有的事情都会有一个起因。 最近产品上需要做一个这样的功能:给一些图形进行染色处理。想想这还不是顺手拈来的事情,早就研究过图形染色的技术。于是我把之前写好的两种...

9900
来自专栏生南星

面试简书(五)

用PS打开图片,点击点击“文件”——“存储为Web所用格式”将图片存储为Web所用格式,点击“存储”。

6710
来自专栏Unity游戏开发

Unity-Optimizing Unity UI(UGUI优化)01 导航、Unity UI的基础概念与原理

摘要: 通过Unity UI优化用户的界面驱动是一门艺术,以下将讨论基本的概念、算法和在Unity UI相关代码

14820
来自专栏Unity游戏开发

Unity-UI(UGUI详解)01基础概念、自动布局、动画集成、富文本

Canvas应该包含全部UI元素,全部的UI元素应该时Canvas的子物体 调整元素的显示顺序可以从Hierarchy中直接拖拽他们,顺序从也可以被控制通过S...

20130

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励