CraftyJS 学习四 -- 2D Graphics
时间:2022-06-26
本文章向大家介绍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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 金九银十要来了?不要慌,这些Android BAT高级面试题刷一刷
- 【SpringBoot DB 系列】Jooq 初体验
- Android轻量级APM性能监测方案
- 保持 Go 模块兼容
- Go 模块:v2 及更高版本
- 发布 Go Modules
- SRA toolkit下载数据
- 【测试开发-1】基于Springboot+layui实现接口自动化平台
- 【SpringBoot-2】SLF4J+logback进行日志记录
- 【JMeter-3】JMeter参数化4种实现方式
- 【JMeter-1】JMeter安装与接口测试入门
- 【JMeter-2】JMeter接口测试之断言实现
- 【UI自动化-1】UI自动化环境搭建与简单示例
- 【UI自动化-2】UI自动化元素定位专题
- 【UI自动化-3】UI自动化元素操作专题