HTML5 Canvas-Oreilly.Canvas.Pocket.Reference (1)

 

第一章

 

画布（canvas）

 

本书将会讲述如何利用javascript以及html语言的canvas标签在网页里绘制图形。动态的在浏览器里绘制各种复杂的图形而不是从一个服务器下下载这些图形，这算是跨越性的举动了吧：

在客户端，创建这些图形所需的代码量远远来得比那些图片本身要小，节省了大量的空间。图片等数据可以从服务器离线下载到客户端，这样就减轻了服务器的负载，换句话说，这也节省了硬件的消耗。

同ajax应用一样，当用户在在客户端画图时，服务器为之提供数据而客户端负责数据的存储。

客户端可以更快的而且不断的重绘图像，使那些丰富的多数据应用（比如游戏、仿真）变得更加可行。不用像以前那样每一帧都从服务器下载显示。

绘图是一件很有意思的事情，而且canvas标签必定会将web开发者从dom的繁所中解说开来。

 

Canvas标签并没有自己独特的外观，但是它无需额外的说明便可以创建一块画布，给客户端的javascript提供一个强大的画图API。Canvas标签是html5的一个标准化标签，但是早在之前便已提出。第一次被使用是在apple的safari1.3里面，火狐浏览器至1.5版起便开始支持，同样opera也是从opera 9之后便一直支持。而chrome浏览器更是所有的版本都能支持。可惜的是，Canvas标签不能被ie9之前的ie浏览器支持，但是在ie6,7,8中可以很好的模拟仿真。

 

Ie浏览器下canvas 的使用

为了能在ie6,7,8下使用canvas，从http://code.google.com/p/explorercanvas/上下载开源的浏览器画布（ExplorerCanvas）的工程.解压完这个文件，在你需要写canvas的页面里头部加上类似于下面的判断ie浏览器版本的代码：

<!--[if lte IE 8]>

<script src="excanvas.compiled.js"></script>

<![endif]-->

当浏览器的头部（head）里有了上面的代码，就可以在ie浏览器里使用基本的canvas绘图操作了。但是像光线渐变以及裁剪的效果还是难以实现，除此外，当你设定好X,Y坐标轴的数量单位时，线的宽度也很难吻合，不过这在其他的浏览器里也会有些小的偏差。

 

大多数canvas API的操作不是基于canvas元素自身，取而代之的是一个利用getContext()获取到的对象。比如以2d作参数，调用getContext()获取一个CanvasRenderingContext2D对象。然后你就可以将二位的图形画进canvas对应的区域。理解明白canvas元素和有关它的内容的对象很重要。由于CanvasRenderingContext2D的名字很长，下面提及到它时，我会用“内容对象”来代替。与此类似，当出现“画布应用程序接口”的字眼，指的就是CanvasRenderingContext2D对象的方法集。同样，由于CanvasRenderingContext2D太过冗长，下面相关的章节就用它的首字母缩写CRC来代替。