首页 / 知识

HTML5 Canvas和EaselJS入门知识分享

2023-04-11 13:53:00

　　HTML5中最受开发者期待的一项新特性莫过于Canvas（画布）元素了。Canvas元素提供了一个可以动态渲染图形和位图的位图画布。它非常类似于Flash中的Bitmap和BitmapData两个类。

　　但是，要使用Canvas还是有点难度的，特别是如果你还想管理，重绘或者运动图形或图片。与Flash播放器不同的是Canvas没有显示队列或显示个别项目这种概念，它提供一个用于绘图的画布，画什么以及什么时候画都取决于开发者。

　　Grant Skinner放出了一个名为EaselJS的JavaScript库，视图提供一个类似于Flash的DisplayList API用于简化Canvas的开发工作。虽然这个库目前还在内测阶段，但是却在早期就诶的就支持全部特性。如果你对Canvas感兴趣，那么这将是一个非常好的起点。

　　在这篇文章中，我将展示如何使用EaselJS来实现Canvas的动画效果。

　　下面是一个库中主要类的列表：

　　DisplayObject:所有EaselJS中显示元素的抽象基类。包含所有显示元素的公用属性（例如：x，y，角度，x比例，y比例，透明度，阴影等等）。

　　Stage:用以包含所有Canvas元素的容器根对象

　　Container:可以包含一组对象的容器对象，可以让你把多个对象作为一个组来操作。

　　Text:在显示列表的上下文中渲染文本

　　Bitmap:按照显示的属性绘制一幅图，一个视频或者画布到画布上

　　BitmapSequence:显示运动的或者动态的精灵板（）并且提供管理回放和队列的APIs

　　Graphics:提供一个简单却又强的绘制适量图形的API

　　Shape:在显示列表上下文中通过Graphics Object渲染适量图

　　点击这里查看完整版API

　　？

　　现在，在我们开始之前，让我们先看一下你在哪能够用到Canvas对象。Canvas是HTML5标准中的一部分，已经被大多数现代浏览器的最新版本所支持，包括：

　　Safari

　　Google Chrome

　　Opera

　　FireFox

　　（IE9业已支持译者注）

　　但是，还有一个问题，并且这是个大问题。IE并没有支持Canvas对象（虽然下一个版本会支持）。根据NetMarketShare的数据，IE6，7，8占据了57%的浏览器市场，是用户最多的一部分。有个叫ExplorerCanvas的项目试图使IE支持Canvas，但是 EaselJS为测试与它的兼容性。当你考虑用Canvas的时候请牢记这点。

　　现在我们有了一个是哦那个Canvas的好主意，先让我们看一个简单点例子。在示例中，我们将使用EaselJS动态的画一个圆并且移动它穿过画布。这个示例将会展示如何按照类库，介绍一下使用类库的一些基本概念，并且展示如何运动一个图形。

　　下面是例子

　　点击查看DEMO

　　现在让我们看一下代码：

　　你可以点击这里下载本示例代码。

　　你可以看到，代码是相当的简单，并且它的结构也非常类似使用Flash中的DisplayList API。

　　有一些非常重要的地方需要指出。

　　EaselJS Stage示例包含Canvas元素，并且处理所有的内容什么时候如何渲染。只有当你调用stage.tick（）的时候stage才渲染，并且为了效率方面的考虑，你仅需要在有内容发生更改或者需要重绘画布的时候再调用这个方法。

　　Tick类用于处理时间管理。当任何一个观察者对象被通知的时候它将调用一个tick方法。这与ActionScript中的ENTER_FRAME事件类似。

　　如果你改变了画布的大小，它的内容会被清空。然而，如果你使用EaselJS，唯一你需要做的就是在改变画布大小后调用stage.tick（）方法，然后画布会重新渲染。

　　由于IE缺乏对Canvas的支持，你探测浏览器是否支持Canvas的工作变得非常重要，你最好给用户一个可以接受的回落。上面的示例代码中有简单的示范，同样你也可以使用Modernizr JavaScript Library这个库，这个库提供了检查浏览器对HTML5特性支持的API。

　　最后，当前版本是一个早期版本，因此APIs有可能发生改变。另外，有些你期望能用的内容可能尚未支持。例如，当前还没有能够获取一个显示对象高度或宽带的方法（你可能自己已经发现了）。然而不管怎么样，这个库还是非常健壮的，并且已经应用到一下产品级的项目中了。