网站首页 > 教程文章 正文
第一节:EaselJS处理图片
使用Bitmap类可以非常方便的处理图片,Bitmap可以用来代表任何形式,比如,Canvas,视频或者图片,可以使用已经存在的元素实例化,或者使用base64。
第二节:使用sprite和SpriteSheets来处理游戏动画
Sprite用来在SpriteSheet中显示一个动画或者一系列的动画帧,SpriteSheet是一系列的图片整合到一张图片中,可以用来定义一个完整的动画,下面是一个spritesheet定义:
varspritesheet=newcreatejs.SpriteSheet({"images":[characterImage],//动画人物图片来自base64编码字符串"frames":{"height":96,"count":10,"width":75},"animations":{run:[0,9]}});
第三节:EaselJS中的"容器" (container)
Container类是EaselJS中用来管理符合图形的单位,例如,我们可以将一个人物的,头,手,脚等等放置在统一的容器中,这样一来,可以统一的管理或者动画图形。虽然容器中每一个部分都可以单独的生成动画,但是容器中的子元素都可以统一使用容器的属性来控制
本节相关代码将演示如何使用容器来定义一系列图片,并且通过定义容器来控制这一系列图片,实现统一的行为
第四节:EaselJS中的cache方法
在图形处理中,往往会有一些图形不太变化,而每次都重新渲染会使得性能比较受影响。
在EaselJS中提供了cache()方法,这个方法可以帮助生成绘制时需要使用的图形到新画布里,它不会在每一个tick中被重新绘制,因此加载速度快,性能更好
被cache的显示图形也可以自由的控制移动,旋转,淡入淡出等等属性,但图形变化了需要手动调用cache或者updateCache方法重新加载
第五节:EaselJS处理Filter(滤镜)
EaselJS包含了一些内置的滤镜方法,如下:
AlphaMapFilter : 将一个灰度图形映射到一个图形的阿尔法通道
AlphaMaskFilter: 将一个图片的阿尔法通道映射到一个显示图形的阿尔法通道
BlurFilter: 执行水平和垂直的模糊
ColorFilter: 显示对象的颜色变形
ColorMatrixFilter: 使用ColorMatrix1来变形图片
了解更多相关代码和演示,请立刻开始学习课程:
HTML5类库CreateJS系列:EaselJS画布类库基础使用(二)
:http://www.gbtags.com/gb/gbliblist/107.htm
猜你喜欢
- 2025-04-30 很少人知道的20个最好用的免费设计软件
- 2025-04-30 2015年16个最佳的免费响应式HTML5框架
- 2025-04-30 学习使用easelJS类库控制HTML5游戏角色的移动和跳跃
- 2025-04-30 面向HTML5 画布的JavaScript库Top10
- 2025-04-30 《响应式开发》16个最佳响应式HTML5框架分享
- 2025-04-30 HTML5画布类库EaselJS生成鼠标控制的游戏动画人物
- 2025-04-30 课程速递:HTML5类库CreateJS系列:EaselJ
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- md5 sha1 (32)
- mybatis plus page (35)
- semaphore 使用详解 (32)
- update from 语句 (32)
- vue @scroll (38)
- 堆栈区别 (33)
- 在线子域名爆破 (32)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)