目录
在HTML5之前，网页显示图像是用jpg、png 等嵌入式图像格式。动画通常是由Flash 实现的。图像显示会拖慢页面加载速度，Flash 依赖于第三方也会出现一些用户无法解决的问题。现在出现了两种新的图形格式canvas和svg，并且HTML5对它们提供了非常好的支持，其中, canvas 为HTML5的新增元素，本节将对canvas的用法进行详细介绍。
1、初识 canvas
canvas的中文意思为画布，现实生活中的画布是用来作画的，HTML5中的canvas与之类似，可以称其为“网页中的画布”，有了这个画布便可以轻松地在网页中绘制图形、表格、文字、图片等。
（1）创建画布
HTML5中提供了<canvas>标签，使用<canvas>标签可以在网页中创建一个矩形区域的画布，它本身不具有绘制功能，可以通过JavaScript操作绘制图形的API进行绘制操作。
在网页中创建一个画布的语法如下所示：
<canvas id="cavsElem" width="400" height="300">您的浏览器不支持canvas</canvas>
在上面语法中，定义id属性是为了在JavaScript代码中引用元素。标签中间的文字在浏览器不支持canvas的情况下才会显示。<canvas>标签与<img>标签一样，有两个原生属性width和height，默认300x 150像素，没有单位的值将会被忽略不计。另外，不要用CSS控制它的宽和高，否则可能会引起画布上的图形变形。
要在画布中绘制图形，首先要通过JavaScript的getElementById()函数获取到网页中的画布对象，代码如下:
var canvas=document.getElementById('cavsElem');
canvas 画布默认为透明，背景色可以自定义。
（2）准备画笔
有了画布之后，要开始作画需要准备一只画笔，这只画笔就是context对象。context对象是画布的上下文，也叫作绘制环境，是所有的绘制操作API的入口。该对象可以使用JavaScript脚本获得，具体语法如下:
var context=canvas.getContext('2d');
在上面语法中参数2d代表画笔的种类，这里用来执行二维操作，三维操作也是存在的，可以把参数替换为webgl，三维操作目前还没有广泛应用，了解即可。
（3）坐标和起始点
2d代表一个平面，绘制图形时需要在平面上确定起始点，也就是“从哪里开始画”，这个点需要通过坐标来控制，canvas的坐标系从最左上角“0, 0”开始。x轴向右增大，y轴向下增大，如图所示。
图 canvas 的坐标系说明图
设置上下文绘制路径起点的代码如下:
var context=canvas. getContext ('2d');
context .moveTo(x,y);
在上述语法中，x、y都是相对于canvas画布的最左上角。使用context对象的moveTo()方法进行设置，相当于移动画笔到某个位置。
（4）绘制线条
在canvas中使用lineTo()方法绘制直线，代码如下:
context.lineTo(x,y);
在上面语法中，“x,y”为线头点坐标，lineTo()方法用于定义从“x,y”的位置绘制一条直线到起点或者上一个线头点。
（5）路径
路径是所有图形绘制的基础，例如绘制直线确定了起始点和线头点后，便形成了一条绘制路径。如果绘制复杂路径，必须使用开始路径和闭合路径的方法，代码如下:
context.beginPath(); //开始路径
context.closePath(); //闭合路径
开始路径的核心作用是将不同线条绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径，同之前绘制的路径可以分开样式设置和管理;闭合路径会自动把最后的线头和开始的线头连在一起。
（6）描边
在canvas图形绘制中，路径只是草稿，真正绘制线必须执行stroke()方法根据路径进行描边，代码如下:
context.stroke();
有了以上内容作为基础，就可以利用Canvas绘制一个图形，基本步骤如下:
(1)创建画布: <canvas></canvas>.
(2)准备画笔(获取上下文对象): canvas.getContex(2d);。
(3)开始路径规划: context.beginPath();。
(4)移动起始点: context.moveTo(x, y);。
(5)绘制线(矩形、圆形、图片…): context.lineTo(x, y);。
(6)闭合路径: context.closePath();。
(7)绘制描边: context.stroke();。
下面通过一个案例来演示如何在页面中绘制一个三角形，如示例所示。
【示例】 Canvas绘制三角形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Canvas绘制三角形</title>
</head>
<body>
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
//===============基本绘制API====================
//获得画布
var canvas = document.getElementById('cavsElem');
var context = canvas.getContext('2d'); //获得上下文
//设置标签的属性宽高和边框
canvas.width = 900;
canvas.height = 600;
canvas.style.border="1px solid #000";
//绘制三角形
context.beginPath(); //开始路径
context.moveTo(100,100); //三角形，左顶点
context.lineTo(300, 100); //右顶点
context.lineTo(300, 500); //底部的点
context.closePath(); //结束路径
context.stroke(); //描边路径
</script>
</body>
</html>
用浏览器打开页面效果如图所示。
图 示例页面效果
在示例中，使用JavaScript为画布设置了宽高和边框，然后通过坐标确定了三角形的3个点，规划了绘制路径，最后进行描边操作，成功地绘制了一个三角形。
（7）填充
在示例中，绘制了一个只有边框的空三角形，canvas 中提供了用于填充当前图形(闭合路径)的方法:
context.fill();
在示例4中进行描边操作之后添加上述填充方法，页面效果如图所示。
图 三角形填充后效果
2、利用canvas绘制矩形和清除矩形
在前面介绍了利用canvas绘制图形的基本步骤，getContext(“2d”)对象作为HTML5的内建对象，它还提供了快速绘制矩形、圆形、字符，以及添加图像的方法。例如，分别使用strokeRect()方法和fillRect()方法来绘制矩形边框和填充矩形，代码如下:
context.strokeRect (x, y, width, height); //绘制矩形边框
context.fillRect (x,y, width, height); //绘制填充矩形
在上面语法中，x、y代表矩形起点的横纵坐标，width 和height代表要绘制矩形的宽和高，需要注意的是两个方法可以单独使用，如示例所示。
【示例】 绘制矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制矩形</title>
</head>
<body>
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
//===============绘制矩形====================
//获得画布
var canvas = document.getElementById('cavsElem');
var context = canvas.getContext('2d'); //获得上下文
//设置标签的属性宽高和边框
canvas.width = 900;
canvas.height = 600;
canvas.style.border="1px solid #000";
//绘制矩形
context.strokeRect(200,50,200,100);
context.fillRect(200,200,200,100);
</script>
</body>
</html>
用浏览器打开示例，页面效果如图所示。
图 示例页面效果
在示例中，通过坐标的不同，绘制了两个不同位置的矩形边框和填充矩形。在canvas中还有一个相当于橡皮擦的方法，使用它可以清除矩形内绘制的内容，语法如下:
context.clearRect (x, y, width, height)
在上面语法中，x.y代表要清除矩形起点的横纵坐标，width 和height代表要清除矩形的宽和高，具体用法如示例所示。
【示例】 清除矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>清除矩形</title>
</head>
<body>
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
//===============清除矩形====================
//获得画布
var canvas = document.getElementById('cavsElem');
var context = canvas.getContext('2d'); //获得上下文
//设置标签的属性宽高和边框
canvas.width = 900;
canvas.height = 600;
canvas.style.border="1px solid #000";
//绘制矩形
context.strokeRect(200,50,200,100);
context.fillRect(200,200,200,100);
//清除矩形
context.clearRect(100,100,200,150);
</script>
</body>
</html>
用浏览器打开页面效果如图所示。
图 示例页面效果
在图中，两个矩形中缺少的部分为被清除的矩形区域，画布上的任意图形都可以用这样的方式来清除。
3、利用 canvas绘制圆形
在canvas中可以使用arc()方法来绘制弧形和圆形，具体语法如下:
context.arc (x , y, radius, startAngle, endAngle, bAntiClockwise);
上述语法中，x、y代表arc的中心点；radius 代表圆形半径的长度; startAngle 代表以starAngle开始(弧度)，endAngle 代表以endAngle结束(弧度); bAntiClockwise 代表是否是逆时针，设置为true意味着弧形的绘制是逆时针方向的，false则为顺时针进行。
下面通过一个案例来演示如何使用arc()方法绘制圆形和弧形，如示例所示。
【示例】 绘制圆形和弧形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制圆形和弧形</title>
</head>
<body>
<canvas id="cavsElem" width='400' height="300">
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
/* 绘制圆形*/
//获得画布并上下文对象
var context = document.getElementById('cavsElem').getContext('2d');
context.beginPath();//开始路径
context.arc(100,100,100,0,2*Math.PI,true);//绘制圆形，true逆时针
context.closePath();//关闭路径
context.fillStyle = 'pink';//设置填充颜色
context.fill();//填充
/* 绘制弧形*/
context.beginPath();//开始路径
context.strokeStyle = "#fff";//设置描边颜色
context.lineWidth = 5;//设置线的粗细
context.arc(100,100,25,Math.PI/6,5*Math.PI/6,false);//绘制弧形，
context.stroke();//描边
</script>
</body>
</html>
用浏览器打开示例，页面效果如图所示。
图 示例页面效果
在示例中，fillStyle()方法用于设置图形的填充颜色，strokeStyle()方法用于设置描边的颜色，lineWidth属性用于设置线条的粗细(以像素为单位)。这些样式设置同样可以应用于其他任意图形。arc()方法的参数中，bAntiClockwise 设置为false，代表要绘制一个弧形，使用Math.PI来获取圆周率π的值，并且使用它来计算弧度值。特殊角度数和弧度数对应如表所示。
表 角度数和弧度数对比
| 度 | 0° | 30° | 45° | 60° | 90° | 120° | 135° | 150° | 180° | 270° | 360° |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 弧度 | 0 | π/6 | π/4 | π/3 | π/2 | 2π/3 | 3π/4 | 5π/6 | π | 3π/2 | 2π |
4、利用 canvas绘制图片
canvas中的绘制图片其实就是把一幅图放在画布 上，语法如下:
context.drawImage (image, dx, dy) //绘制原图
context. drawImage (image, dx, dy, dWidth, dHeight) //缩放绘图
context.drawImage (image, sx, sy, sWidth, sHeigh, dx, dy, dWidth, dHeight) // 切片绘图
在上述语法中，image 代表图片的来源，dx、 dy 代表在目标中的坐标，sx、sy是Image在源中的起始坐标，sWidh. sHeight 是源中图片的宽和高，dWidth. dHeight 是目标的宽和高。
Drawlmag()方法的常用方式是绘制原图，如示例所示。
【示例】 绘制图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制图片</title>
</head>
<body>
<canvas id="cavsElem" width="400" height="300" >
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script type="text/javascript">
//获得画布
var canvas=document.getElementById('cavsElem');
//设置画布边框
canvas.style.border="1px solid #000";
//获取上下文
var context = canvas.getContext('2d');
//创建图片对象
var img=new Image();
//设置图片路径
img.src="img/img1.jpg";
//当页面加载完成使用此图片
img.onload = function(){
//使用canvas绘制图片
context.drawImage(img,0,0);
};
</script>
</body>
</html>
用浏览器打开示例，页面效果如图所示。
图 示例页面效果
在示例中，必须使用图片对象的onload事件，否则是看不到运行效果的，因为绘制图片的基础是这个图片已经被加载。
5、利用canvas其他方法
canvas中提供的有关图形绘制的方法还有很多，这里不能一一列举， 但是有必要介绍几个常用的方法，具体如下:
（1） clip() 方法
clip()方法用于从原始画布剪切任意形状和尺寸的区域，具体使用方法如示例所示。
【示例】 clip()剪切任意形状和尺寸区域
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>clip()剪切任意形状和尺寸区域</title>
</head>
<body>
<canvas id="cavsElem" width="400" height="300" >
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
//获得画布
var canvas=document.getElementById('cavsElem');
//设置画布边框
canvas.style.border="1px solid #000";
//获取上下文
var context = canvas.getContext('2d');
// 剪切矩形区域
context.rect(50,20,200,120);//(x,y,width,height)
context.stroke();//描边
context.clip();
// 在 clip()之后绘制圆形,只有被剪切区域的内圆形可见
context.arc(200,100,70,0,2*Math.PI,true);//(x,y,半径,开始弧度，结束弧度，true代表逆时针绘制圆形)
context.fillStyle="pink";
context.fill();//填充
</script>
</body>
</html>
用Chrome浏览器打开示例，页面效果如图所示。
图 示例页面效果
（2）save() 和restore()方法
在canvas绘制图形的过程中，有时网页需要多次显示相同的效果，例如绘制圆形后绘制矩形，然后在触发某个事件时需要回到绘制圆形的状态，这时就用到了save() 和restore()方法，save() 用来保存画布的绘制状态，例如保存绘制一个圆形的状态，当绘制矩形后需要回到之前的状态，这时可以使用restore()方法。Restore()方法用于移除自上一次调用save()方法所添加的任何效果。
