HTML5 Canvas和EaselJS入门（译）

DK 于2011,01,25发表 | 1 评论 »

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

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

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

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

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

    o

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

    2. o

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

    3. o

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

    4. o

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

    5. o

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

    6. o

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

    7. o

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

    8. o

  8. 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

现在让我们看一下代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. o<meta charset="utf-8" />
  6.  
  7. o<meta name="author" content="Mike Chambers" />
  8. o<meta name="keywords" content="" />
  9. o<meta name="description" content="" />
  10. o<meta name="copyright" content="Mike Chambers" />
  11. o<meta name="robots" content="index,follow" /> 
  12.  
  13. o<title>TITLE</title>
  14.  
  15. o<style>
  16. o#stageCanvas
  17. o{
  18. obackground-color:#333333;
  19. o}
  20. o</style>
  21.  
  22. o<!-- 导入Easel库，下载地址 http://easeljs.com/
  23. o-->
  24. o<script src="scripts/easeljs.js"></script>
  25.  
  26. o<script>
  27.  
  28. o//检查Canvas在当前浏览器是否支持
  29. o//http://diveintohtml5.org/detect.html#canvas
  30. oif(!(!!document.createElement("canvas").getContext))
  31. o{
  32. ovar wrapper = document.getElementById("canvasWrapper");
  33. owrapper.innerHTML = "Your browser does not appear to support " +
  34. o"the HTML5 Canvas element";
  35. oreturn;
  36. o}
  37.  
  38. o//EaselJS Stage实例包含Canvas元素
  39. ovar stage;
  40.  
  41. o//EaselJS Shape示例我们将做成动画
  42. ovar circle;
  43.  
  44. o//圆的半径
  45. ovar CIRCLE_RADIUS = 10;
  46.  
  47. o//x坐标，当圆离开屏幕的时候
  48. ovar circleXReset;
  49.  
  50. o//EaselJS Rectangle（矩形）实例用于存储Canvas的边界值
  51. ovar bounds = new Rectangle();
  52.  
  53. o//初始化函数
  54. ofunction init()
  55. o{
  56.  
  57. o//通常这里我们会做一些Canvas的嗅探工作.
  58. o//浏览http://www.modernizr.com/有个用于HTML5嗅探非常有用的库
  59. o//获取Canvas对象的引用
  60. ovar canvas = document.getElementById("stageCanvas");
  61.  
  62. o//复制画布绑定到边界实例
  63. o//注意，如果我们改变了画布的大小，我们需要同时改动这些边界
  64. obounds.w = canvas.width;
  65. obounds.h = canvas.height;
  66.  
  67. o//pass the canvas element to the EaselJS Stage instance
  68. o//The Stage class abstracts away the Canvas element and
  69. o//is the root level display container for display elements.
  70. ostage = new Stage(canvas);
  71.  
  72. o//创建一个EaselJS图形元素用来创建画圆的命令
  73. ovar g = new Graphics();
  74.  
  75. o//1px的画笔
  76. og.setStrokeStyle(1);
  77.  
  78. o//设置画笔颜色, 使用EaselJS
  79. o//Graphics.getRGB静态方法.
  80. o//创建了一个透明度为.7的白色
  81. og.beginStroke(Graphics.getRGB(255,255,255,.7));
  82.  
  83. o//画这个圆
  84. og.drawCircle(0,0, CIRCLE_RADIUS);
  85.  
  86. o//注意过圆现在并未真正的被画出来
  87. o//图形实例只是具有画圆的命令
  88. o//它在stage需要渲染的时候才被画出来
  89. o//通常在我们调用stage.tick()的时候
  90.  
  91. o//创建一个新的图形实例. 这是一个可以添加到stage中并可以被渲染的显示对象
  92. o//Pass in the Graphics instance that we created, and that
  93. o//we want the Shape to draw.
  94. ocircle = new Shape(g);
  95.  
  96. o//初始化x坐标，并初始化
  97. ocircle.x = circleXReset = -CIRCLE_RADIUS;
  98.  
  99. o//设置y坐标
  100. ocircle.y = canvas.height / 2;
  101.  
  102. o//将圆加入到舞台
  103. ostage.addChild(circle);
  104.  
  105. o//让stage开始渲染
  106. ostage.tick();
  107.  
  108. o//添加Tick类的订阅.这会每隔一段时间就调用tick方法
  109. o//（就像Flash中的ENTER_FRAME）
  110. oTick.addListener(this);
  111. o}
  112.  
  113. o//每隔一定时间被Tick调用的函数
  114. ofunction tick()
  115. o{
  116. o//检查图像是否超出了stage的右边界
  117. oif(circle.x > bounds.w)
  118. o{
  119. o//如果有，则重置
  120. ocircle.x = circleXReset;
  121. o}
  122.  
  123. o//将圆的x坐标移动10像素
  124. ocircle.x += 10;
  125.  
  126. o//重新渲染stage
  127. ostage.tick();
  128. o}
  129. o</script>
  130.  
  131. </head>
  132. <body onload="init()">
  133. o<div width="400" height="300" id="canvasWrapper">
  134. o<canvas width="400" height="300" id="stageCanvas"></canvas>
  135. o</div>
  136. </body>
  137. </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有可能发生改变。另外，有些你期望能用的内容可能尚未支持。例如，当前还没有能够获取一个显示对象高度或宽带的方法（你可能自己已经发现了）。然而不管怎么样，这个库还是非常健壮的，并且已经应用到一下产品级的项目中了。

下面是一些可能对你开始通过EaselJS使用Canvas有用的资源：

    o

  1. EaselJS Homepage

    2. o

  2. EaselJS API Docs

    3. o

  3. Modernizr JavaScript Library (for detecting support for HTML5 features).

    4. o

  4. Canvas Element Draft Specification

    5. o

  5. Canvas Element (Wikipedia)

    6. o

  6. Let’s call it a draw(ing surface) Good introduction to the low level Canvas API.

    7. o

  7. HTML5 Browser Support Matrix

    8. o

  8. HTML5 and CSS3 Readiness

    9. o

  9. HTML5 Support in your Browser

点击查看原文

转载请注明原文出处《HTML5 Canvas和EaselJS入门（译）》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。

标签: , , | 分类： Javascript, 编程 |

一条回复 发表于 “HTML5 Canvas和EaselJS入门（译）”上

  1. EaselJS入门 | BuBu，on my way says:
    2012/01/30 at 8:54 am

    […] Support Matrix HTML5 and CSS3 Readiness HTML5 Support in your Browser 转载请注明原文出处《HTML5 Canvas和EaselJS入门（译）》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 […]

我要评论