HTML 5新特性Canvas入门秘籍-html5新特性

随着IE 10的即将发布正式版，标志者HTML5的时代已经越来离我们越来越近了，尽管HTML 5的最终标准草案还没最终敲定，但象Chrome,Firefox等浏览器对HTML5的标准已经支持的十分完善了，IE 10的预览版本也声称支持更多的HTML 5特性。在此情况下，无论作为CTO还是一般的前端页面开发者还是网站编程的开发人员，都应该开始给予HTML5相当的重视。而在HTML5中，其中最令开发者和用户值得留意的新特性，莫过于Canvas的功能了，它能在目前的IE 9，IE 10以及Chrome,FireFox等多种浏览器中使用，是目前HTML5中富客户端动画效果的实现方式，有了它，HTML5就有了跟Adobe Flash对抗的资本，用户以后只要使用支持HTML5的浏览器，就可以不用安装Flash插件了。那么，究竟什么是HTML 5中的Canvas功能呢?本文将带领初学者学习Canvas的入门知识。

51CTO推荐专题：HTML 5 下一代Web开发标准详解

走近Canvas 元素标签

官方对Canvas元素标签的定义为：Canvas(画布)可以用来进行绘制图形，绘制游戏的图案或者其他图形图案，允许使用脚本动态渲染点阵图像。简单来说，Canvas就是允许你在HTML5中，使用Javascript去绘制你喜欢的任何图形了，包括文字，图片、线、点、各种形状等。Canvas使用的是Canvas 2D API去绘制图形的，这个API功能十分强大，而且大部分的浏览器都支持 2D canvas ——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，firefox 也可以通过插件形式支持 3D canvas 。下面马上来看Canvas的例子。

<canvas id=”myCanvas” style=”width:300px; height:300px”></canvas>

这个代码就会在浏览器中先绘画一张画布，宽度和高度都是300px，但这个时候页面上并不能显示什么效果，只是一个空的区域。

在一个页面中，可以有不同的canvas，不同的canvas都必须有自己的id属性以示区分。为了在canvas上绘制图形，必须引用canvas的上下文context变量。Context上下文能让你访问2D API中的属性和方法，这样就可以在画布元素中操作和绘画图形了，这个我们稍后再详细讲解。

先来看下每一canvas元素标签中都有X和Y坐标，X坐标代表水平，Y坐标代表垂直，下图是其坐标系的图：

Canvas和SVG的关系

开发者必须清楚SVG技术和canvas是不同的。SVG是基于XML的图形矢量显示技术，可以将其与CSS混搭使用，也可以使用SVG DOM动态向其添加行为。而canvas则允许使用Javascript去绘制各种图象和图形，下面是一些canvas胜过svg的优点：

1) canvas在绘制复杂图象时，绘画速度比SVG快不少。

2) 可以保存canvas绘制的图象，但SVG不能直接使用浏览器的保存功能保存。

3) 在canvas中所有东西都以象素形式存在。

4) svg需要在浏览器中使用插件显示。

但要同时注意到，svg也有自身的优势，比如：

1) svg的图形解析分辨率能适应不同大小尺寸。

2) svg由于使用XML，因此能定义很多不同的目标元素。

3) svg能绘制很复杂的动画效果。

那如何选择呢?建议如果你的网站的图象对分辨率要求高(矢量图要求)，那么选择SVG，如果你的应用是网页游戏等对速度要求响应高的，也不想过多跟XML打交道的话，则选用canvas。更多关于如何选择SVG和Canvas,可以参考这篇文章的论述：http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx

Canvas和硬件加速

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

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

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

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

Canvas 2D API

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

var myCanvas = document.getElementById(“myCanvas”);  
　　var context = myCanvas.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的用法，可以参考这个页面http://msdn.microsoft.com/en-us/library/ff975057.aspx)。下面，我们开始学习如何使用这些API去绘制图形。

#p#

绘制形状和颜色

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

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方法了，如下代码：

var canvas = document.getElementById(“myCanvas”);  
　　var context = canvas.getContext(“2d”);  
　context.fillRect(5, 5, 145, 145);

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

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

context.fillRect(5, 5, 145, 145);  
context.fillStyle = “rgb(0, 162, 232)”;  
context.fillRect(40, 55, 145, 145);  
context.fillStyle = “rgba(255, 0, 0, 0.2)”;  
context.fillRect(75, 105, 145, 145);

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

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

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画圆或者圆弧。x,y为圆心坐标，radius为半径，startAngle,endAngle为开始/结束划圆的角度，anticlockwise为是否逆时针画圆(True为逆时针，False为顺时针)。

注意这里的角度为弧度制，所以如果画一个正圆的话，是Math.PI * 2，而画60°的话，就是60 * Math.PI / 180，比如下面的代码，用fill样式填充了一个黑色的正圆：

context.beginPath();  
context.fillStyle = “rgb(0, 0, 0)”;  
context.arc(123, 93, 70, 0, 2 * Math.PI, true);  
context.fill();

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

context.beginPath();  
context.strokeStyle = “rgb(0, 0, 0)”;  
context.arc(123, 93, 70, 0, 2 * Math.PI, true);  
context.stroke();

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

context.beginPath();  
context.strokeStyle = “rgb(0, 0, 0)”;  
context.arc(123, 93, 70, 0, 0.5 * Math.PI, true);  
context.stroke();

结果如下图：

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

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

context.lineWidth = 20;  
context.beginPath();  
context.moveTo(5, 50);  
context.bezierCurveTo(30, 30, 130, 530, 200, 100);  
context.stroke();

绘画的图形如下图：

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

// 绘画脸部轮廓  
　　context.beginPath();  
　　context.lineWidth = 10;  
　　context.strokeStyle = “rgb(0, 0, 0)”;  
　　context.arc(200, 233, 150, 0, 2 * Math.PI, true);  
　　context.stroke();  
　　// 填充面部颜色  
　　context.beginPath();  
　　context.fillStyle = “rgba(80, 100, 80, 0.4)”;  
　　context.arc(200, 233, 150, 0, 2 * Math.PI, true);  
　　context.fill();  
　　// 绘制右眼  
　　context.lineWidth = 20;  
　　context.beginPath();  
　　context.moveTo(230, 130);  
　　context.bezierCurveTo(230, 130, 230, 130, 240, 200);  
　　context.stroke();  
　　// 绘制左眼  
　　context.beginPath();  
　　context.moveTo(170, 130);  
　　context.bezierCurveTo(170, 130, 170, 130, 160, 200);  
　　context.stroke();  
　　// 绘制上唇  
　　context.beginPath();  
　　context.moveTo(100, 230);  
　context.bezierCurveTo(100, 230, 200, 380, 300, 230);  
　context.stroke();  
　// 绘制下唇  
　context.beginPath();  
　context.moveTo(100, 235);  
　context.bezierCurveTo(105, 270, 200, 480, 300, 232);  
　context.stroke();

显示结果如下图：

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

var a = 1;  
　　for (j = 0; j < 100; j++) {  
　　var r = 255, g = 0, b = 0;  
　　for (i = 0; i < 150; i++) {  
　　// 黄色  
　　if (i < 25) g += 10.2;  
　　// 绿色  
　　else if (i >= 25 && i < 50) r -= 10.2;  
　　// 蓝色  
　　else if (i >= 50 && i < 75) {  
　　g -= 10.2;  
　b += 10.2;  
　　}  
　　// 紫色  
　　else if (i >= 75 && i < 100) r += 10.2;  
　　// 红色  
　　else b -= 10.2;  
　　context.fillStyle = “rgba(” + Math.floor(r) + “,” +  
　　Math.floor(g) + “,” + Math.floor(b) + “,” + a + “)”;  
　　context.fillRect(3 * i, 5 * j, 3, 5); } a -= 0.01; }

如果不想使用以上的方法去生成渐变颜色，可以使用如下的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 的圆。

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

var gradient = context.createLinearGradient(0, 0,0, 145);  
gradient.addColorStop(0, “#00ABEB”);  
gradient.addColorStop(0.5, “yellow”);  
gradient.addColorStop(0.8, “green”);  
gradient.addColorStop(1, “white”);  
context.fillStyle = gradient;  
context.fillRect(5, 5, 145, 145);

实现的效果如下图：

原文：http://tech.it168.com/a2011/1108/1270/000001270295_all.shtml

【编辑推荐】