HTML5 程序设计笔记（二）

浏览数：19 / 时间：2015年06月09日

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>