Canvas API
1、HTML5 Canvas 概述
1.1 历史
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相对来说比较简单。
1.2 Canvas 是什么
在网页上使用canvas元素时，他会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，但也可以自定义具体的大小或者设置canvas元素的其他特性。
1 <canvas></canvas>
在页面假如了canvas元素后，我们便可以通过javascript来自由的控制它。可以在其中添加图片、线条、以及文字，也可以在里面绘图，甚至还可以加入高级动画。
使用canvas变成，首先要获取其上下文（content）。接着在上下文中执行动作，最后将这些动作应用到上下文中。可以将canvas的这种编辑方式想象成为数据库事务：开发人员先发起一个事务，然后执行某些操作，最后提交事务。
1.3 canvas坐标
canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿着垂直方向向下延伸。左上角的坐标为x=0,y=0的点称作原点。
1.4 什么情况下不用canvas
在某些情况下，如果其他元素已经够用了，就不应该再使用canvas元素。例如，用canvas元素在HTML页面中动态绘制所有不同的标题，就不如直接使用标题样式（H1、H2等），他们所实现的效果是一样的。
1.5 替代内容
访问页面的时候，如果浏览器不支持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。
1.6 CSS 和canvas
同大多数HTML元素一样，canvas元素也可以通过应用css的方式来增加边框，设置内边距、外边距等，而且一些css属性还可以被canvas内的元素继承。比如字体样式，在canvas内添加的文字，其样式默认同canvas元素本身是一样的。
此外，在canvas中为context设置属性同样要遵从css语法。例如，对context应用颜色和字体样式，跟在任何HTML和CSS文档中使用的语法完全一样。
1.7 浏览器对HTML5 Canvas的支持情况
随着IE9的到来，所有浏览器厂商现在都提供了对HTML5 Canvas的支持，而且他已被大多数用户所掌握。
2、使用HTML5 Canvas API
2.1 检测浏览器支持情况
在创建HTML5 canvas元素之前，首先要确保浏览器能够支持它。如果不支持，就需要为那些古董级浏览器提供一些替代文字。
1 try
2 {
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的元素，通过以适当的信息更新该元素的内容，可以反应出浏览器的支持情况。
2.2 在页面中假如canvas
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 //将这条线绘制到canvas
13 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才会马上更新。
HTML5 程序设计笔记（二）,布布扣,bubuko.com