HTML5 Canvas 概述

本文中，我们将探索如何使用HTML5的Canvas API.Canvas API很酷，我们可以通过它来动态创建生成和展示图形，图表，图像以及动画。本文将使用渲染API(rendering API)的基本功能来创建一副可以放大放小并自适应浏览器环境的图。还会演示如何基于用户输入来动态创建图像，生成热点图。当然我也会提醒你在HTML5 Canvas 时需要注意的问题，并且分享解决这些问题的方法。

  一，HTML5概述

   1.1.历史

Canvas的概念最初是由苹果公司提出的，用在Mac OS X Webkit中创建控制板部件（dashboard widget）。在Canvas出现之前，开发人员要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG（Scalable Vector Graphics,可伸缩矢量图形）插件，或者只有IE才支持的VML（Vector Markup Language,矢量标记语言），以及其他一些稀奇古怪的JavaScript技巧。

假如我们要在没有canvas元素的条件下绘制一条对角线——听起来视乎很简单，但是实际上如果没有一套二维绘图API的话，这会是一项相当复杂的工作。HTML5 Canvas能够提供这样的功能对浏览器端来说此功能非常有用，因此Canvas被纳入了HTML5规范。

                                                   SVG和Canvas对比                                                          

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

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

1.2. Canvas是什么？

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

如下代码清单是最基本的canvas元素。和平时我们写的html元素一样定义，<canvas></canvas>

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

大多数主流操作系统和框架支持的二维绘制操作，HTML5 Canvas API都支持。如果你在近年来曾经有过二维图像编程经验，那么会对HTML5 Canva API感觉非常顺手，因为这个API就是参加既有系统设计的。如果没有这方面经验，则会发现与这么多年来一直使用的图片加CSS开发Web图形的方式比起来，Canvas的渲染系统有多么强大。
   使用canvas编程，首先要将获取其上下文（context）。接着在上下文中执行动作，最后将这些动作应用到上下文中。可以将canvas的这种编辑方式想象成为数据库事物：开发人员先发起一个事物，然后执行某些操作，最后提交事物。

 1.3.Canvas坐标

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

1.4.什么情况下不用Canvas

尽管canvas元素功能非常强大，用处也很多，但在某些情况下，如果其他元素已经不够用了，就不应该再使用canvas元素，例如，用canvas元素在html页面中动态绘制所有不同的表头，就不如直接使用标题样式的标签（H1,H2等），它们所实现的效果是一样的。

 1.5.替代内容

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

<canvas>
    Update your browser to enjoy canvas!
<canvas>

当然，除了上面代码中的文本外，同样还可以使用图片，不论是文本还是图片都会在浏览器不支持canvas元素的情况下显示出来。

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

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

关于如何处理可替代且可访问Canvas内容，HTML5设计者的当前提议之一是使用前述的备用内容部分。不过，为了让Canvas的备用内容对屏幕阅读器和其他科访问性工具也有用处，它要能够支持键盘导航，即便是在浏览器支持Canvas且可正常显示的情况下 也是如此。尽管一些现代浏览器已经支持这项功能，但你不应该依赖于浏览器来支持用户的特殊需求。现阶段，我们推荐使用页面上独立部分来展现canvas的替代内容。还有一个额外因素，许多用户可能喜欢使用替代的控件或者期望一种更好的展示方式，以便他们可以快速理解和操作页面或者应用。

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的支持，而且它已被大多数用户所掌握。这是Web开发史上的一个重要里程碑，它使得2D绘图在现代网络上蓬勃发展。

尽管旧版本IE占有的市场份额正在缩小，但在使用Canvas API之前，我们还是应该首先检测当前浏览器是否支持html5 canvas。接下来就会讲到如何编程检测浏览器支持情况。

 二  使用HTML5 Canvas API

 三  使用HTML5 Canvas 创建应用