Canvas和硬件加速

　　在学习canvas时，建议读者阅读这篇文章《硬件加速下的图形显示对比》，这篇文章中对比了HTML5下canvas在各浏览器下的渲染表现。在早期的浏览器中，所有对图形的显示运算都是有CPU去实现的，而随着互联网的快速发展，对图形处理的要求越来越高，于是很多的图形渲染工作都由图形处理单元(GPU)去处理了，比如使用Direct2D或者DirectWrite。当图形处理工作大部分交由GPU去处理时，大大减轻了CPU的工作负担，可以腾出来做其他更复杂的工作。

　　Javascript一直被指责在处理图形方面逊色，但随着FireFox，Chrome等浏览器的大行其道，还有IE 9的新的Javascript引擎Chara，它采用在后台与IE并行并且独立的CPU内核中编译 JavaScript 脚本，采用单独的后台线程进行编译。采用这种方法，可以充分利用现在的多核处理器功能。开发人员可以不用更改任何现有的代码即可利用现有计算机硬件的带来的性能提升。

　　因此，有了浏览器在GPU方面的加速功能，就能为HTML5的canvas的使用提供很好的环境。

　　当向canvas发出绘画命令时，浏览器直接将指令发到图形加速器而不需要开发者更多的干预，硬件图形加速器则以难以置信的运算速度实时绘画和渲染图形。可以通过阅读下文来了解更多的在不同浏览器之间的硬件加速测试的具体情况(地址：)

　　Canvas 2D API

　　canvas 2D API对象允许开发者绘制各种图片和图形。调用时，需要通过getContext方法获得其上下文，这个方法中有一个参数，目前是2d，调用的代码如下：

　　由于每一个canvas元素都有自己的上下文context，因此如果一个页面中有多个canvas的话，必须对每一个canvas都按上面的方法获得其context。除此之外，canvas api有如下的若干重要方法：

　　形状变换类的方法

　　• scale –允许对当前canvas对象进行形状大小变换

　　• rotate –允许对当前的canvas对象绕 x轴和y轴旋转。

　　状态变换类方法

　　• save – 保存当前canvas的状态

　　• restore –恢复上一个已保存的canvas的状态

　　文字类方法

　　• font –设置或获得当前canvas的字体

　　• fillText –向当前canvas填充文字

　　• measureText –获得指定文字的宽度

　　更多的关于canvas 2D API的用法，可以参考这个页面)。下面，我们开始学习如何使用这些API去绘制图形。

　　绘制形状和颜色

　　首先，学习下如何画矩形，下面是相关的方法：

　　1) fillRect(x, y, w, h)，使用当前样式去绘制一个矩形并对其进行填充，其中x,y,w,h分别是X，Y坐标和宽度高度坐标。

　　2)strokeRect(x, y, w, h)，使用当前的轮廓样式去勾画一个矩形，注意这里是用线条去勾画，而不是去填充一个矩形。

　　3)clearRect(x, y, w, h)，在当前的画布中清除矩形的内容。

　　画矩形最简单的方法是用fillRect方法了，如下代码：　

　　则在X=5，Y=5的坐标系中画出一个145*145的矩形，如下图：

　　如果不指定颜色，默认的是使用黑色去填充整个矩形。可以使用fillStyle方法为矩形指定颜色或其他样式，比如可以充分利用CSS 3中的opacity透明度属性，比如如下的代码，分别画了三个矩形，每个矩形的下半部分都使用了样式形成了半透明效果：

　　其中rgba中比传统的rgb多了a，即透明度的含义，a的值也是0到1之间的数字，0表示完全透明，1则是完全不透明。运行结果如下图：

　　接下来学习如何绘制圆(弧)，绘制用到的方法如下：

　　如果要用stroke笔来勾画圆形的话，只需要指定勾画的样式strokeStyle即可，如下代码：

　　下面是一个画弧度的代码例子：

　　结果如下图：

　　接下来，我们学习如何画贝塞尔曲线。HTML 5的API中，有一个画这个曲线的很容易的方法bezierCurveTo，相关参数介绍如下：

　　bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)：为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点，而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候，当前的位置为 (x, y)。下面是相关代码：

　　绘画的图形如下图：

　　由于有了贝塞尔曲线功能的，因此可以绘制很多不同的图形了，比如下面的代码绘制出一个简单的笑脸图。

　　显示结果如下图：

　　目前为止，我们使用的fillStyle都是使用一种单独的颜色去填充图形，而实际上，fillStyle也支持使用多种颜色去填充，比如下面的例子，随机生成了各种颜色去填充画布实现了彩虹的效果：

　　如果不想使用以上的方法去生成渐变颜色，可以使用如下的canvas提供的几个方法去简便实现渐变效果：

　　addColorStop(offset, color) –addColorStop 方法接受 2 个参数，offset参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值

　　createLinearGradient(x0, y0, x1, y1) –该方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

　　createRadialGradient(x0, y0, r0, x1, y1, r1) – 该方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

　　下面的代码演示了使用渐变的效果：

　　实现的效果如下图：