阅读量:0
HTML5 Canvas 起步(2) 路径是指在 HTML5 中使用 Canvas 元素创建和绘制路径的方法。
HTML5 Canvas 是一个强大的技术，允许通过 JavaScript 代码绘制平面或三维图形，并且可以进行交互操作，在 HTML5 Canvas 中，路径（path）是一个由直线段、曲线段、圆弧和其他形状组成的容器，通过绘制路径，可以创建各种各样的形状，从简单的图形如矩形、圆形到复杂的自定义图形。
创建路径
在 HTML5 Canvas 中，创建路径需要三个步骤：
1、创建路径起始点：使用beginPath() 方法启动一个新路径，表示开始创建一个新的路径。
2、添加路径原点：使用moveTo(x, y) 方法将路径的起始点移动到指定的坐标。
3、添加路径中其他的点：使用绘图命令例如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();绘制矩形
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);自定义路径
在 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 功能中最基础的部分之一，通过绘制路径，可以在画布上创建出复杂的形状，并且通过组合不同形状可以创造出万千图形，包括可用于游戏和交互的各种图形，这些形状都有其特定的绘制方法，例如绘制线条、圆、矩形等。
# HTML5 Canvas 起步(2) 路径
## 引言
在HTML5 Canvas中，路径（Paths）是绘制图形的基础，路径是一系列连接的直线或曲线，可以用来绘制矩形、圆形、贝塞尔曲线等，本教程将详细介绍如何在Canvas中使用路径。
## 路径的基本操作
### 创建路径
要创建一个路径，首先需要使用`beginPath()`方法，这个方法没有参数，并且必须在使用任何路径绘制方法之前调用。
```javascript
context.beginPath();
```
### 绘制直线
使用`lineTo()`方法可以绘制直线，这个方法需要两个参数：`x`和`y`坐标，表示直线终点相对于画布左上角的位置。
```javascript
context.moveTo(10, 10); // 设置起点
context.lineTo(100, 100); // 绘制到终点
```
### 绘制曲线
Canvas提供了几种绘制曲线的方法：
`arc()`：绘制圆弧。
`quadraticCurveTo()`：绘制二次贝塞尔曲线。
`bezierCurveTo()`：绘制三次贝塞尔曲线。
#### 圆弧
`arc()`方法需要以下参数：
`x`：圆弧中心的x坐标。
`y`：圆弧中心的y坐标。
`radius`：圆弧的半径。
`startAngle`：圆弧的起始角度（以弧度为单位）。
`endAngle`：圆弧的结束角度（以弧度为单位）。
`counterclockwise`：布尔值，表示是否按逆时针方向绘制圆弧。
```javascript
context.arc(50, 50, 40, 0, 2 * Math.PI, false);
```
#### 二次贝塞尔曲线
`quadraticCurveTo()`方法需要以下参数：
`cp1x`：控制点的x坐标。
`cp1y`：控制点的y坐标。
`x`：终点的x坐标。
`y`：终点的y坐标。
```javascript
context.moveTo(10, 10);
context.quadraticCurveTo(50, 200, 100, 10);
```
#### 三次贝塞尔曲线
`bezierCurveTo()`方法需要以下参数：
`cp1x`：第一个控制点的x坐标。
`cp1y`：第一个控制点的y坐标。
`cp2x`：第二个控制点的x坐标。
`cp2y`：第二个控制点的y坐标。
`x`：终点的x坐标。
`y`：终点的y坐标。
```javascript
context.moveTo(10, 10);
context.bezierCurveTo(50, 200, 100, 200, 100, 10);
```
### 关闭路径
使用`closePath()`方法可以闭合路径，使得路径首尾相连。
```javascript
context.closePath();
```
### 描边和填充
使用`stroke()`方法可以绘制路径的轮廓，而`fill()`方法可以填充路径。
```javascript
context.strokeStyle = 'red';
context.lineWidth = 2;
context.stroke(); // 描边
context.fillStyle = 'blue';
context.fill(); // 填充
```
## 示例代码
以下是一个简单的示例，展示了如何使用路径绘制一个矩形和一个圆形。
```html
```
## 归纳
通过理解和使用Canvas中的路径操作，可以创建各种复杂的图形，本教程介绍了创建路径、绘制直线和曲线、关闭路径以及描边和填充的基本操作，通过实践，你可以进一步探索Canvas的更多高级功能。
