本节书摘来自异步社区《HTML5游戏编程核心技术与实战》一书中的第2章，第2.1节,作者： 向峰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第2章 Canvas绘图
首先，我们需要学习的是HTML5中的canvas元素，canvas元素是HTML5中一个非常重要的元素，也是实现游戏的核心，canvas元素的诞生为HTML5能够支持较高性能的动画和游戏提供了可行性。HTML4中，如果要完成类似画板和游戏的功能，需要使用Flash，但Flash需要在浏览器中安装Flash插件才能提供相应功能。本章围绕canvas元素讲解以下几个主要内容（对于非常熟悉本章内容的读者可略过本章）：
- 基本知识；
- 图形API；
- 图像API；
- 文本API；
- 坐标变换。
2.1 基本知识
在HTML4时代，不安装插件的情况下，基于浏览器的绘图组件是最初由微软向W3C递交的VML（Vector Markup Language矢量标记语言）技术，但未被W3C采纳，只能在IE5.0及其后续版本中使用，后来VML和PGML（由Adobe和SUN提出）合并成SVG（Scalable Vector Graphics，可伸缩矢量图形）规范。SVG技术是基于XML的矢量图形绘制技术，对于普通的图像应用来说足够，但是对于性能要求较高的游戏渲染来说，SVG支持还不够，而且SVG也无法支持像素级别的操作，不能直接使用硬件加速机制，所以，需要有一个更适合游戏运行的高效的组件，这就是canvas组件。
在所有的桌面应用程序的开发平台中，几乎都有canvas组件，canvas组件几乎成了绘图组件的代名词。在基于浏览器的应用开发中，canvas元素最初是由苹果在自己的Mac OS X WebKit中推出，供应用程序和Safari浏览器使用。后来，W3C建议在下一代网络技术中加入该元素以适应新的技术要求，目前几乎所有的浏览器都提供了对canvas的支持。
canvas元素本质上是在浏览器中提供了一块可绘制的区域，JavaScript代码可以访问该区域，通过一套完整的API进行二维图像绘制。另外，如果显卡硬件支持3D图形功能，还可以使用canvas绘制3D图形。下面我们看看canvas的使用。
2.1.1 创建canvas
首先，我们来看如何在HTML5中使用canvas元素，使用canvas标签的代码如下：
<!DOCTYPE html>
<html>
<canvas id=”can” width=”800” height=”600”>Hello Canvas</canvas>
</html>
以上代码创建了一个id为can的canvas，canvas的宽度为800，高度为600。需要注意的是，创建的canvas在浏览器中看不到，因为它默认是透明的。另外，canvas比较特殊，我们最好不要用css样式定义宽度和高度，直接使用width和height定义就好，默认情况下canvas的width是300，height是150。需要注意的是，canvas的结束标签是必需的，当浏览器不支持canvas元素时，canvas标签中间的文字就会显示出来。
2.1.2 理解canvas坐标系
加入了canvas元素之后，我们就可以通过JavaScript，使用canvas元素提供的API操作canvas，在canvas上绘图。在绘图之前，我们需要了解canvas元素的坐标系，canvas的坐标系如图2-1所示。
可以看出，对于canvas来说，它的坐标系是以左上角为原点，向右延伸是X横坐标正方向，向下延伸是Y纵坐标正方向，所以原点的坐标是(x,y)=(0,0)。弄清楚坐标系对于以后使用canvas的API意义重大，在绘图的时候需要时刻记住坐标空间。
2.1.3 获取canvas环境上下文
在定义好了canvas之后，我们就可以使用JavaScript访问canvas元素，使用canvas提供的一系列API。在使用canvas的时候，首先要得到canvas的环境上下文，有了canvas的环境上下文，才能够对canvas进行相应操作，可以通过以下方式获取环境上下文:
<script>
var context = canvasElement.getContext(“2d”);
</script>
使用canvas元素的getContext ("2d")的方式可以获取到2D图像操作的环境上下文，如果获取的context为空，表示该浏览器不支持canvas。有了context变量后就可以在canvasElement元素上进行2维图像操作，另外可以通过getContext ("webgl")获取webgl环境上下文进行3维图像操作。
