云计算、AI、云原生、大数据等一站式技术学习平台

网站首页 > 教程文章 正文

课程速递:HTML5类库CreateJS系列二

jxf315 2025-04-30 17:41:18 教程文章 6 ℃

第一节: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

Tags:

最近发表
标签列表