极客笔记HTML5 Canvas – 绘制路径
HTML5 Canvas是一个功能强大的技术，允许你用JavaScript代码绘制平面或三维图形，并且可以进行交互操作。在HTML5 Canvas中，路径(path)是一个由直线段、曲线段、圆弧和其他形状组成的容器，通过绘制路径，你可以创建各种各样的形状，从简单的图形例如矩形，圆形到复杂的自定义图形。
创建路径
在HTML5 Canvas中，创建路径需要三个步骤：
- 创建路径起始点：使用
beginPath()方法启动一个新路径，表示开始创建一个新的路径。 - 添加路径原点：使用
moveTo(x, y)方法将路径的起始点移动到指定的坐标。 - 添加路径中其他的点：使用绘图命令例如:
lineTo(x, y),arc(cx, cy, r, startAngle, endAngle, anticlockwise)也可以使用贝塞尔曲线绘制路径，使用quadraticCurveTo(cpX, cpY, x, y)上例表示在路径中添加一个抛物线曲，则可使用如下代码：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
// 起始点
ctx.moveTo(50, 50);
// 绘制二次贝塞尔曲线
ctx.quadraticCurveTo(230, 30, 150, 110);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();
绘制线条
在HTML5 Canvas中，lineTo(x,y)方法是用来绘制直线的，要将直线绘制垂直于x轴/水平于y轴，则需要使用不同的坐标值。例如，下面的代码将在HTML5 Canvas上绘制一个连接起点(20,20)和终点(100,100)的直线。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(100, 100);
ctx.stroke();
接下来，将这个绘制路径存储到画布上，使用stroke()方法绘制路径上的图形。这个函数会绘制所有输入路径的线条，只要“beginPath”调用与stroke()之间不进行任何需要绘制的内容。在绘制直线时，应该给路径设置线条宽度和颜色。
ctx.lineWidth = 5;
ctx.strokeStyle = 'red';
ctx.stroke();
绘制圆
在HTML5 Canvas中，arc()方法是用来绘制圆和圆弧的。该函数需要6个参数：
- 圆心的x轴坐标
- 圆心的y轴坐标
- 圆的半径r
- 所绘制的圆弧的开始角度，以弧度计
- 所绘制的圆弧的结束角度，以弧度计
- 一个布尔值，规定是顺时针绘制圆弧，还是逆时针绘制圆弧
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#003300';
ctx.stroke();
该函数在当前路径上添加一个圆。innerHTML的角度单位是以弧度为单位。下表显示了一些圆弧顺序和圆心角的值之间的关系：
| 顺序 | 圆心角取值 |
|---|---|
| 1 | 0 |
| 2 | π/2 |
| 3 | π |
| 4 | (3/2)π |
| 5 | 2π |
绘制矩形
HTML5 Canvas还可以用于绘制矩形，通过使用fillRect(x,y,width,height)方法，来绘制矩形。该方法需要4个参数：x轴坐标、y轴坐标、矩形的宽度和高度。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(25, 25, 100, 50);
ctx.lineWidth = 3;
ctx.strokeStyle = '#00FF00';
ctx.strokeRect(25, 25, 100, 50);
上述代码绘制了一个填满绿色的矩形，边界使用了蓝色的线条，边界可以通过使用strokeRect()方法来绘制。
自定义路径
在HTML5 Canvas中，你可以通过绘制不同的线条和形状来创建自定义路径。例如，下面这个示例将会创建一个包含两个矩形和一条直线的路径：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 红色矩形
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect (10, 10, 55, 50);
// 绿色矩形
ctx.fillStyle = "rgb(0, 200, 0)";
ctx.fillRect (30, 30, 55, 50);
// 继续绘制路径
ctx.beginPath();
ctx.moveTo(53,72);
ctx.lineTo(33,92);
ctx.lineTo(70,102);
ctx.lineWidth = 5;
ctx.strokeStyle = '#0000FF';
ctx.stroke();
清除路径
在HTML Canvas中，clearRect(x,y,width,height)可用于清除指定区域内的一部分或全部像素，其中4个参数分别表示画布上要清除的左上角x坐标、左上角y坐标、要清除的矩形区域宽度和高度。例如，要清除整个画布，则可以使用下面的代码：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);
结论
路径绘制是HTML5 Canvas功能中最基础的部分之一，通过绘制路径，我们可以在画布上创建出复杂的形状，并且通过组合不同形状可以创造出万千图形，包括可用于游戏和交互的各种图形。这些形状都有其特定的绘制方法，例如绘制线条、圆、矩形，并且可以基于其特有的特征进行组合绘制。在您开始绘制时，首先记住一点：每个新的路径应使用beginPath()方法声明，并在其之后绘制所有的形状，组合方式与先前的区别。