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
?
现在让我们看一下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Mike Chambers" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="copyright" content="Mike Chambers" />
<meta name="robots" content="index,follow" />
<title>TITLE</title>
<style>
#stageCanvas
{
background-color:#333333;
}
</style>
<!-- 导入Easel库，下载地址 http://easeljs.com/
-->
<script src="scripts/easeljs.js"></script>
<script>
//检查Canvas在当前浏览器是否支持
//http://diveintohtml5.org/detect.html#canvas
if(!(!!document.createElement("canvas").getContext))
{
var wrapper = document.getElementById("canvasWrapper");
wrapper.innerHTML = "Your browser does not appear to support " +
"the HTML5 Canvas element";
return;
}
//EaselJS Stage实例包含Canvas元素
var stage;
//EaselJS Shape示例我们将做成动画
var circle;
//圆的半径
var CIRCLE_RADIUS = 10;
//x坐标，当圆离开屏幕的时候
var circleXReset;
//EaselJS Rectangle（矩形）实例用于存储Canvas的边界值
var bounds = new Rectangle();
//初始化函数
function init()
{
//通常这里我们会做一些Canvas的嗅探工作.
//浏览http://www.modernizr.com/有个用于HTML5嗅探非常有用的库
//获取Canvas对象的引用
var canvas = document.getElementById("stageCanvas");
//复制画布绑定到边界实例
//注意，如果我们改变了画布的大小，我们需要同时改动这些边界
bounds.w = canvas.width;
bounds.h = canvas.height;
//pass the canvas element to the EaselJS Stage instance
//The Stage class abstracts away the Canvas element and
//is the root level display container for display elements.
stage = new Stage(canvas);
//创建一个EaselJS图形元素用来创建画圆的命令
var g = new Graphics();
//1px的画笔
g.setStrokeStyle(1);
//设置画笔颜色, 使用EaselJS
//Graphics.getRGB静态方法.
//创建了一个透明度为.7的白色
g.beginStroke(Graphics.getRGB(255,255,255,.7));
//画这个圆
g.drawCircle(0,0, CIRCLE_RADIUS);
//注意过圆现在并未真正的被画出来
//图形实例只是具有画圆的命令
//它在stage需要渲染的时候才被画出来
//通常在我们调用stage.tick()的时候
//创建一个新的图形实例. 这是一个可以添加到stage中并可以被渲染的显示对象
//Pass in the Graphics instance that we created, and that
//we want the Shape to draw.
circle = new Shape(g);
//初始化x坐标，并初始化
ci