HTML5中最受開發者期待的一項新特性莫過于Canvas（畫布）元素了。Canvas元素提供了一個可以動態渲染圖形和位圖的位圖畫布。它非常類似于Flash中的Bitmap和BitmapData兩個類。
但是，要使用Canvas還是有點難度的，特別是如果你還想管理，重繪或者運動圖形或圖片。與Flash播放器不同的是Canvas沒有顯示隊列或顯示個別項目這種概念，它提供一個用于繪圖的畫布，畫什么以及什么時候畫都取決于開發者。
Grant Skinner放出了一個名為EaselJS的JavaScript庫，視圖提供一個類似于Flash的DisplayList API用于簡化Canvas的開發工作。雖然這個庫目前還在內測階段，但是卻在早期就誒的就支持全部特性。如果你對Canvas感興趣，那么這將是一個非 常好的起點。
在這篇文章中，我將展示如何使用EaselJS來實現Canvas的動畫效果。
下面是一個庫中主要類的列表：
1.DisplayObject:所有EaselJS中顯示元素的抽象基類。包含所有顯示元素的公用屬性（例如：x，y，角度，x比例，y比例，透明度，陰影等等）。
現在，在我們開始之前，讓我們先看一下你在哪能夠用到Canvas對象。Canvas是HTML5標準中的一部分，已經被大多數現代瀏覽器的最新版本所支持，包括：
Safari
Google Chrome
Opera
FireFox
（IE9業已支持 譯者注）
但是，還有一個問題，并且這是個大問題。IE并沒有支持Canvas對象（雖然下一個版本會支持）。根據NetMarketShare的數 據，IE6，7，8占據了57%的瀏覽器市場，是用戶最多的一部分。有個叫ExplorerCanvas的項目試圖使IE支持Canvas，但是 EaselJS為測試與它的兼容性。當你考慮用Canvas的時候請牢記這點。
現在我們有了一個是哦那個Canvas的好主意，先讓我們看一個簡單點例子。在示例中，我們將使用EaselJS動態的畫一個圓并且移動它穿過畫布。這個示例將會展示如何按照類庫，介紹一下使用類庫的一些基本概念，并且展示如何運動一個圖形。
下面是例子
現在讓我們看一下代碼：
<!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坐標，并初始化
circle.x = circleXReset = -CIRCLE_RADIUS;
//設置y坐標
circle.y = canvas.height / 2;
//將圓加入到舞臺
stage.addChild(circle);
//讓stage開始渲染
stage.tick();
//添加Tick類的訂閱.這會每隔一段時間就調用tick方法
//（就像Flash中的ENTER_FRAME）
Tick.addListener(this);
}
//每隔一定時間被Tick調用的函數
function tick()
{
//檢查圖像是否超出了stage的右邊界
if(circle.x > bounds.w)
{
//如果有，則重置
circle.x = circleXReset;
}
//將圓的x坐標移動10像素
circle.x += 10;
//重新渲染stage
stage.tick();
}
</script>
</head>
<body on load ="init()">
<div width="400" height="300" id="canvasWrapper">
<canvas width="400" height="300" id="stageCanvas"></canvas>
</div>
</body>
</html>
你可以看到，代碼是相當的簡單，并且它的結構也非常類似使用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有可能發生改變。另外，有些你期望能用的內容可能尚未支持。例如，當前還沒有能夠獲取一個顯示對象高度或寬帶的方法（你可能自己已經發現了）。然而不管怎么樣，這個庫還是非常健壯的，并且已經應用到一下產品級的項目中了。
