绘制图有很多种方法，可以借助flash实现，也可以使用SVG和VML来绘图。本章将要学习一种新的绘图方法——使用Canvas元素，它是基于HTML5原生的绘图功能。使用Canvas元素，可以绘制图形，也可以实现动画。它方便了使用Javascript脚本的前端开发人员，寥寥的竖行代码，就可以在Canvas元素中实现各种图形及动画。本章将介绍如何使用Canvas元素来绘制一些简单的图形。
本章主要知识点如下：
·认识Canvas元素
·使用Canvas绘图
·Canvas与JavaScript之间的互动
·利用Canvas实现网页中的动画
10.1 认识Canvas
HTML5的Canvas元素有一套绘图API（即接口函数），自成体系。
JavaScript就是通过调用这些绘图API来实现绘制图形和动画功能的。
10.1.01 Canvas的历史
在HTML5以前的标准中，有一个缺陷，就是不能直接动态地在HTML页面中绘制图形。若要在页面中实现绘图，或者是非常复杂的页面实现（使用大量的Javascript代码），要么借助第三方工具实现（如Flash、SVG、VML等）。这种做法无疑是把问题复杂化了。
在互联网应用不断发展中，页面绘制使用的越来越多。
在未来的发展趋势上，也需要HTML自己完成绘图功能，
Canvas元素应运而生。
Canvas元素是为了客户端矢量图形而设计的。
它自己没有行为，但却把一个绘图API展现给客户端Javascript；使脚本能够把想绘制的东西都绘制到一块画布上。Canvas的概念最初有苹果公司提出，并在Safari1.3Web 浏览器中首次引入。随后Firefox 1.4 和 Opera9两款浏览器都开始支持Canvas绘图。目前IE9以上版本也已经支持这项功能。Canvas的标准化正由一个Web浏览器厂商的非正式协会在推进，目前Canvas已经成为HTML5草案中一个正式的标签。
10.1.02 Canvas与SVG,以及VML之间的差异
Canvas有一个基于Javascript的绘图API,而SVG和VML使用一个XML文档来描述绘图。Canvas与SVG,以及VML的实现方式不同，但在实现上可以互相模拟。
Canvas有自己的优势，由于不存储文档对象，性能较好。
但若要移除画布里的图形元素，往往需要擦掉绘图从新绘制它。
10.2 Canvas基本知识
在网页上使用Canvas元素，像使用其他HTML标签一样简单，然后利用JavaScript脚本调用绘图API,绘制各种图形。
Canvas拥有多种绘制路径、矩形、圆形、字符，以及添加图像的方法，还能够实现动画。
10.2.01 构建Canvas元素
Canvas元素是以标签的形式应用到HTML页面上的。在HTML页面中放入：
<canvas></canvas>
不过Canvas毕竟是个新东西，很多旧浏览器都不支持。为了增加用户体验，可以提供替代文字，放在Canvas标签中。例如：
<canvas>你的浏览器不支持该功能!</canvas>
当浏览器不支持Canvas时，标签里的文字就会显示出来。跟其他HTML标签一样，Canvas标签有一些共同的属性：
<canvas id="canvas" width="200" height="200">你的浏览器不支持Canvas标签功能</canvas>
其中，id属性决定了Canvas标签的唯一性，方便查找。width和height属性分别决定了Canvas的宽和高，其数值代表了Canvas标签内包含了多少像素。
Canvas标签可以和其他标签一样应用CSS样式表。如果在头部的样式表中添加如下样式：
canvas{
border:1px solid #CCC;
}
可以使用CSS样式来控制Canvas的宽和高，但Canvas内部的像素点还是根据Canvas自身的width和height属性确定，默认是宽300像素，高是150像素。用CSS设置Canvas尺寸；只能体现Canvas占用的页面空间，但是Canvas内部的绘图像素还是由width和height属性来决定的。这样会导致整个Canvas内部的图像变形。
10.2.02 使用JavaScript实现绘图的流程
Canvas元素本身是没有绘图能力的。所有的绘制工作必须在Javascript中完成。前面讲过，Canvas元素提供一套绘图API。在开始绘图之前，先要获取Canvas元素的对象，再获取一个绘图上下文，接下来就可以使用绘图API中丰富的功能了。
1.获取Canvas对象
在绘图之前，首先需要从页面中获取Canvas对象，通常使用document对象的getElementById()方法获取。例如，以下代码就是获取id为“canvas”的Canvas对象。
var canvas = document.getElementById("canvas");
开发者还可以使用通过标签名称来获取对象的getElementByTagName()方法。
2.创建二维的绘图上下文对象。
Canvas对象包含了不同类型的绘图API,还需要使用getContext()方法来获取，接下来要使用的绘图上下文对象。
var content=canvas.getContext("2d");
getContext对象是内建的HTML5对象，拥有<F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12><F12>
10.3 使用Canvas绘图
10.3 使用Canvas绘图
本节将学习使用绘图API.在接下来的小节中将逐个演绎Canvas的各种绘图功能。
10.3.1 绘制矩形
矩形属于一种特殊而又普遍使用的一种图形。
矩形的宽和高，确定了图形的样子。
再给予一个绘制其实坐标，就可以确定其位置了。
这样正个矩形就确定下来了。
绘图API为绘制矩形提供了两个专用的方法：strokeRect()和fillRect(),可分别用于绘制矩形边框和填充矩形区域。
通常在绘制之前，往往先设置样式，然后才能进行绘制。
1.设置样式
strokeStyle
lineWidth
fillStyle
strokeRect()
fillRect()
2
3
4.特殊的矩形绘制方式
除了本节介绍的两个与矩形有关的方法(绘制矩形边框和填充矩形区域)外，还有一个方法clearRect。执行该方法，将会擦除指定的矩形区域，使其变为透明。使用方法如下：
context.clearRect(x,y,width,height);
10.3.2 使用路径
路径就是预先构建好的图像轮廓。它由一个或多个直线段或曲线段组成，可以是开放的，也可以是闭合的。在很多绘图工具或方法中都会用到。
canvas中，所有基本图形都是以路径为基础的，我们通常会调用lineTo(),rect(),arc()等方法来设置一些路径。在最后使用fill()或stroke()方法进行绘制边框或填充区域时，都是参照这个路径来进行的。
使用路径的进本方法由三步：
·创建绘图路径
·设置绘图样式
·绘制图形
1.创建绘图路径
创建绘图路径经常会用到两个方法beginPath()和closePath(),分别表示开始一个新的路径和关闭当前的路径。
首先，使用beginPath()方法创建一个新的路径。该路径是一组子路径的形式存储的，他们共同构成一个图形。
每次调用beginPath()方法，都会产生一个新的子路径。
……
10.3.3 图形组合
通常，把一个图形绘制在另个图形上，称之为图形组合。
默认的情况是上面的图形覆盖了下面的图形，这也是图形组合默认的设置了“sourse-over”;
10.3.4 绘制曲线
在实际的绘图中，绘制曲线是常用的一种绘图形式。我们在设置路径的时候，需要使用一些曲线方法来勾勒出曲线路径，以完成曲线的绘制。在Canvas中，绘图API提供了多种曲线绘制方法。主要的曲线绘制方法有arc(),arcTo(),quad
10.3.5 使用图像
有时候，可能需要借助一些现有的图片，以便绘图更加灵活和方便。在Canvas中，绘图API已经提供了插入
10.3.06 剪切区域
10.3.07 绘制渐变
10.3.08 描边属性
10.3.09 模式
10.3.10 变换
10.3.11 使用文本
10.3.12 阴影效果
10.3.13 状态保存与恢复
10.3.14 操作像素