如何利用Canvas绘制矢量图形

# 1. 介绍Canvas与矢量图形

## 1.1 什么是Canvas元素？

Canvas是HTML5提供的一种绘图区域，可以通过JavaScript等脚本语言来绘制图形、动画和其他图像。它可以用来制作游戏、制作实时图表、绘制照片合成，甚至是实时视频处理等。

在HTML文档中，Canvas由一个<canvas>元素表示，它具有宽度和高度属性，可以通过CSS设置宽高，也可以通过JavaScript动态设置。

<canvas id="myCanvas" width="200" height="100"></canvas>

## 1.2 矢量图形与位图图形的区别

矢量图形是由数学公式定义的，因此可以无限放大而不失真，同时文件体积较小。而位图图形则是由像素组成的网格图像，放大会导致失真，且文件体积较大。

Canvas可以绘制矢量图形，这意味着我们可以利用Canvas绘制的图形在放大缩小时不会失真。

## 1.3 Canvas绘制矢量图形的优势

Canvas绘制矢量图形的优势主要在于其灵活性和可定制性。通过Canvas我们可以绘制出各种各样的图形，并且可以通过改变参数来实现动态效果，这为开发者提供了更多的可能性。

# 2. Canvas绘制基本图形

Canvas作为HTML5元素的一部分，提供了丰富的API来绘制各种类型的图形和路径。在本章中，我们将学习如何使用Canvas来绘制基本的图形，包括线条、矩形、多边形、圆和椭圆。

### 2.1 绘制线条和路径

在Canvas中，我们可以使用线条和路径来绘制各种形状和图案。通过指定起始点和终点，我们可以绘制直线；而使用路径则可以创建更加复杂的图形，包括曲线、多边形等。

**示例代码：**

// 获取Canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制直线
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

// 绘制路径（三角形）
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(400, 200);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.stroke();

**代码说明：** 上面的代码演示了如何在Canvas中绘制直线和路径。首先，通过`beginPath()`方法开始绘制新的路径，然后使用`moveTo()`指定起始点，`lineTo()`指定终点，最后使用`stroke()`方法进行绘制。对于路径，我们使用`closePath()`来闭合路径。

**绘制结果：** 代码运行后，在Canvas上将会显示一条直线和一个三角形。

### 2.2 绘制矩形和正多边形

Canvas还提供了绘制矩形和正多边形的方法，使得绘制这些基本图形变得简单和便捷。

**示例代码：**

// 绘制矩形
ctx.fillStyle = 'lightblue';
ctx.fillRect(50, 100, 100, 50);

// 绘制正多边形（六边形）
ctx.beginPath();
var sides = 6; // 六边形
var radius = 30;
var centerX = 250;
var centerY = 150;
ctx.moveTo(centerX + radius * Math.cos(0), centerY + radius * Math.sin(0));
for (var i = 1; i <= sides; i++) {
  ctx.lineTo(centerX + radius * Math.cos(i * 2 * Math.PI / sides), centerY + radius * Math.sin(i * 2 * Math.PI / sides));
}
ctx.closePath();
ctx.fillStyle = 'lightgreen';
ctx.fill();

**代码说明：** 以上代码演示了如何在Canvas中绘制矩形和六边形。我们使用`fillRect()`方法绘制矩形，并使用`beginPath()`、`moveTo()`和`lineTo()`方法绘制六边形的路径，最后使用`fill()`方法填充颜色。

**绘制结果：** 运行代码后，Canvas将显示一个矩形和一个六边形。

### 2.3 绘制圆和椭圆

Canvas提供了绘制圆和椭圆的方法，可以通过指定圆心坐标和半径来绘制圆形，或者通过椭圆方程来绘制椭圆。

**示例代码：**

// 绘制圆
ctx.beginPath();
ctx.arc(150, 250, 50, 0, 2 * Math.PI);
ctx.stroke();

// 绘制椭圆
ctx.beginPath();
ctx.ellipse(300, 250, 50, 30, 0, 0, 2 * Math.PI);
ctx.stroke();

**代码说明：** 上面的代码演示了如何在Canvas中绘制圆和椭圆。我们使用`arc()`方法来绘制圆，其中参数分别为圆心的x坐标、y坐标、半径、起始角度和结束角度；使用`ellipse()`方法来绘制椭圆，参数为中心点的x坐标、y坐标、x轴半径、y轴半径、旋转角度、起始角度和结束角度。

**绘制结果：** 运行代码后，Canvas将显示一个圆和一个椭圆。

通过学习本章内容，我们可以了解如何使用Canvas绘制基本图形，包括线条、矩形、多边形、圆和椭圆。在下一章中，我们将学习如何绘制更加复杂的图形，包括自定义图形和贝塞尔曲线。

# 3. Canvas绘制复杂图形

Canvas不仅可以绘制基本的图形，还可以通过路径和曲线绘制出复杂的矢量图形。在这一章节中，我们将学习如何利用Canvas绘制各种复杂的图形。

#### 3.1 利用路径绘制自定义图形

利用Canvas的路径绘制功能，我们可以绘制各