Canvas API

　　　　Canvas的概念最初是由苹果公司提出的，用于在Mac OS X WebKit中创建控制板部件（dashboard widget）。在Canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG插件，或者只有IE才支持的VML，以及其他一些稀奇古怪的javascript技巧。

　　　　SVG和Canvas对比

　　　　　　"Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像SVG图像那样可以被放大缩小。此外，用Canvas绘制出来的对象不属于页面DOM结构或者任何明明空间——这点被认为是一个缺陷。SVG图像却可以在不同的分辨率下流畅地缩放，并且支持单击检测（能检测到鼠标单击图像上的哪个点）。

　　　　　　既然如此，为什么WHATWG的HTML5归法不使用SVG呢？尽管Canvas有明显的不足，但HTML Canvas API有两个方面优势可以弥补：首先，不需要将所绘制图像中的每个图元当作对象存储，因此执行性能非常好；其次，在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。

　　　　在网页上使用canvas元素时，他会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，但也可以自定义具体的大小或者设置canvas元素的其他特性。

　　　　 1 <canvas></canvas> 

　　　　在页面假如了canvas元素后，我们便可以通过javascript来自由的控制它。可以在其中添加图片、线条、以及文字，也可以在里面绘图，甚至还可以加入高级动画。

　　　　使用canvas变成，首先要获取其上下文（content）。接着在上下文中执行动作，最后将这些动作应用到上下文中。可以将canvas的这种编辑方式想象成为数据库事务：开发人员先发起一个事务，然后执行某些操作，最后提交事务。

　　　　canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿着垂直方向向下延伸。左上角的坐标为x=0,y=0的点称作原点。

　　　　在某些情况下，如果其他元素已经够用了，就不应该再使用canvas元素。例如，用canvas元素在HTML页面中动态绘制所有不同的标题，就不如直接使用标题样式（H1、H2等），他们所实现的效果是一样的。

　　　　访问页面的时候，如果浏览器不支持canvas元素，或者不支持HTML5 Canvas API中的某些特性，那么开发人员最好提供一份替代代码。例如，开发人员可以通过一张替代图片或者一些说明性的文字告诉访问者，使用最新的浏览器可以获得更佳的浏览效果。　　　

1 <canvas>2     Update your browser to enjoy canvas!3 </canvas>

　　 　　canvas元素的可访问性怎么样？

　　　　　　“提供替代图像或替代文本引出了可访问性这个话题——很遗憾，这是HTML5 Canvas规范中明显的缺陷。例如，没有一种原生方法能够自动为已插入到canvas中的图片生成用于替换的文字说明。同样，也没有原生方法可以生成替代文字以匹配由Canvas Text API动态生成的文字。”

　　　　Canvas API的未来迭代中，可能会包含与Canvas显示相关的可聚焦的子区域以及他们之间的交互控制。但是，如果你的图像显示需要显著的交互行为，那么可以考虑使用SVG代替Canvas API。SVG也用于绘制，而且他整合了浏览器的DOM。

　　　　同大多数HTML元素一样，canvas元素也可以通过应用css的方式来增加边框，设置内边距、外边距等，而且一些css属性还可以被canvas内的元素继承。比如字体样式，在canvas内添加的文字，其样式默认同canvas元素本身是一样的。

　　　　此外，在canvas中为context设置属性同样要遵从css语法。例如，对context应用颜色和字体样式，跟在任何HTML和CSS文档中使用的语法完全一样。

　　　　随着IE9的到来，所有浏览器厂商现在都提供了对HTML5 Canvas的支持，而且他已被大多数用户所掌握。

　　　　在创建HTML5 canvas元素之前，首先要确保浏览器能够支持它。如果不支持，就需要为那些古董级浏览器提供一些替代文字。

1 try2 {3     document.createElement("canvas").getContext("2d");4     document.getElementById("support").innerHTML = "HTML5 Canvas is supported in your browser"  ;5 }6 catch(e)7 {8     document.getElementById("support").innerHTML = "HTML5 Canvas is not supported in your browser";9 }

　　　　上面的代码试图创建一个canvas对象，并且获取其上下文。如果发生错误，则可以捕获错误，进而得知该浏览器不支持canvas。页面中预先放入了ID为support的元素，通过以适当的信息更新该元素的内容，可以反应出浏览器的支持情况。

1 <canvas height="200" width="200"></canvas>

　　　　以上代码会在页面上显示出一块200 × 200 像素的“隐藏”区域。假如要为其增加一个边框，用标准CSS边框属性来设置。

1 <canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>

　　　　注意，上面的代码中增加了一个值为“diagonal”的ID特性，这么做的意义在于以后的开发过程中可以通过ID来快速找到该canvas元素。

 1 <script> 2     function drawDiagonal(){ 3         //取得canvas元素及绘图上下文 4         var canvas = document.getElementById(‘diagonal‘); 5         var context = canvas.getContext(‘2d‘); 6  7         //用绝对坐标来创建一条路径 8         context.beginPath(); 9         context.moveTo(70, 140);10         context.lineTo(140, 70);11 12         //将这条线绘制到canvas13         context.stroke();14     }15 16     window.addEventListener("load", drawDiagonal, true);17 </script>

　　　　首先通过引用特定的canvas ID值来获取对canvas对象的访问权。这段代码中的ID就是diagonal。接着定义一个context变量，调用canvas对象的getContext方法，并传入希望使用的canvas类型。其中，"2d" 为2D、 "webgl"为3D。

　　　　接下来，基于这个上下文执行画线的操作。代码中调用了三个方法——beginPath、moveTo、lineTo，传入了这条线的起点和终点的坐标。

　　　　方法moveTo和lineTo实际上并不画线，而是在结束canvas操作的时候，通过调用context.stroke()方法完成线条的绘制。moveTo(x, y)，将上下文移动到坐标指定点；lineTo(x, y)，从指定点画线至目标点。

　　　　从上面的代码可以看出，canvas中所有的操作都是通过上下文对象来完成的。只有当对路径应用绘制（stroke）或填充（fill）方法时，结果才会显示出来。否则，只有在显示图像、显示文本或者绘制、填充和清除矩形框的时候，canvas才会马上更新。