canvas包含哪些绘图方法

1. 概述

Canvas 是 HTML5 的新元素，本质上是一个可以使用脚本（通常是JavaScript）在其中绘制图形的区域。通过Canvas，不仅可以绘制简单的2D图形，还可以绘制复杂的图像和动画、视频等。本文将介绍Canvas中常用的绘图方法。

2. 绘制矩形

在Canvas中，绘制矩形是最简单的任务之一。可以使用 fillRect() 方法为矩形填充颜色，使用 strokeRect() 方法为矩形描边，也可以使用 rect() 方法绘制矩形路径。

2.1 fillRect() 方法

fillRect() 方法用于为矩形填充颜色，其语法如下：

ctx.fillRect(x, y, width, height);

其中，x 和 y 分别表示矩形左上角的坐标，width 和 height 分别表示矩形的宽度和高度。下面是一个绘制矩形的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

上面的代码会在画布上绘制一个红色的矩形。

2.2 strokeRect() 方法

strokeRect() 方法用于为矩形描边，其语法如下：

ctx.strokeRect(x, y, width, height);

其参数含义与 fillRect() 方法相同。下面是一个绘制描边矩形的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#FF0000";
ctx.lineWidth = 3;
ctx.strokeRect(0, 0, 150, 75);

上面的代码会在画布上绘制一个红色的描边矩形。

2.3 rect() 方法

rect() 方法用于创建矩形路径，语法如下：

ctx.rect(x, y, width, height);

生成的路径可以用于绘制图形或者作为其他用途。下面是一个绘制矩形路径的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 75);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.lineWidth = 3;
ctx.strokeStyle = "#000000";
ctx.stroke();

上面的代码生成了一个矩形路径，并且为其填充了红色，描边为黑色。

3. 绘制圆形

Canvas中绘制圆形的方式有三种：使用 arc() 方法、使用 arcTo() 方法和使用 ellipse() 方法。下面将分别介绍这三种方法。

3.1 arc() 方法

arc() 方法用于创建弧形或圆形，语法如下：

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

其中，x 和 y 表示圆心的坐标，radius 表示圆的半径，startAngle 和 endAngle 表示圆弧的起始角度和结束角度（弧度制），anticlockwise 表示是否逆时针绘制，默认为顺时针。

下面是一个绘制圆形的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 50, 30, 0, 2*Math.PI);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.lineWidth = 3;
ctx.strokeStyle = "#000000";
ctx.stroke();

上面的代码生成了一个半径为30像素的圆，并且为其填充了红色，描边为黑色。

3.2 arcTo() 方法

arcTo() 方法用于创建两个切线与圆弧相交的点，语法如下：

ctx.arcTo(x1, y1, x2, y2, radius);

其中，x1 和 y1 表示第一个切线与圆弧的交点坐标，x2 和 y2 表示第二个切线与圆弧的交点坐标，radius 表示圆弧的半径。

下面是一个绘制圆弧的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.arcTo(120, 10, 120, 30, 20);
ctx.lineTo(120, 80);
ctx.stroke();

上面的代码生成了一个从起点开始的一条直线，与一段圆弧和一条垂直线相交，并且得到了一个路径。描边颜色为黑色。

3.3 ellipse() 方法

ellipse() 方法用于创建椭圆形，语法如下：

ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

其中，x 和 y 表示中心点的坐标，radiusX 和 radiusY 表示椭圆半径，rotation 表示旋转角度（弧度制），startAngle 和 endAngle 表示椭圆弧的起始角度和结束角度（弧度制），anticlockwise 表示是否逆时针绘制，默认为顺时针。

下面是一个绘制椭圆形的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.ellipse(100, 50, 50, 30, Math.PI/4, 0, 2*Math.PI);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.lineWidth = 3;
ctx.strokeStyle = "#000000";
ctx.stroke();

上面的代码生成了一个中心点坐标为(100,50)，长半轴为50像素，短半轴为30像素的椭圆，并且为其填充了红色，描边为黑色。

4. 绘制路径和曲线

4.1 beginPath() 方法

在Canvas中，beginPath() 方法用于启动一个新路径或重置当前路径。当需要创建新的路径时，调用这个方法即可。

4.2 moveTo() 和 lineTo() 方法

在Canvas中，使用 moveTo() 方法将绘图游标移到指定坐标处，在此基础上使用 lineTo() 方法开始绘制一条直线，其语法如下：

ctx.moveTo(x, y);
ctx.lineTo(x, y);

其中，x 和 y 表示直线的终点坐标。

下面是一个绘制路径的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 50);
ctx.lineTo(10, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.strokeStyle = "#000000";
ctx.stroke();

上面的代码生成了一个三角形，并且为其填充了红色，描边为黑色。

4.3 quadraticCurveTo() 方法

quadraticCurveTo() 方法用于创建一条二次贝塞尔曲线，语法如下：

ctx.quadraticCurveTo(cpx, cpy, x, y);

其中，cpx 和 cpy 表示控制点的坐标，x 和 y 表示终点坐标。

下面是一个绘制二次贝塞尔曲线的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.quadraticCurveTo(100, 100, 190, 10);
ctx.lineWidth = 3;
ctx.strokeStyle = "#000000";
ctx.stroke();

上面的代码生成了一个从(10,10) 到 (190,10)的路径，并使用贝塞尔曲线连接。

4.4 bezierCurveTo() 方法

bezierCurveTo() 方法用于创建一条三次贝塞尔曲线，语法如下：

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

其中，cp1x 和 cp1y 表示第一个控制点的坐标，cp2x 和 cp2y 表示第二个控制点的坐标，x 和 y 表示终点坐标。

下面是一个绘制三次贝塞尔曲线的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(30, 50, 170, 50, 190, 10);
ctx.lineWidth = 3;
ctx.strokeStyle = "#000000";
ctx.stroke();

上面的代码生成了一个从(10,10) 到 (190,10)的路径，并使用三次贝塞尔曲线连接。

5. 绘制文本

在Canvas中，可以使用 fillText() 和 strokeText() 方法在画布上绘制文本。

5.1 fillText() 方法

fillText() 方法用于在画布上填充文本，语法如下：

ctx.fillText(text, x, y, maxWidth);

其中，text 表示要填充的文本，x 和 y 表示文本的起点坐标，maxWidth 表示文本的最大宽度。

下面是一个填充文本的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillStyle = "#FF0000";
ctx.fillText("Hello World", 10, 50);

上面的代码在画布上填充了一个红色的 “Hello World” 文本。

5.2 strokeText() 方法

strokeText() 方法用于在画布上描边文本，语法如下：

ctx.strokeText(text, x, y, maxWidth);

参数含义与 fillText() 方法相同。下面是一个描边文本的例子：

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeStyle = "#FF0000";
ctx.strokeText("Hello World", 10, 50);

上面的代码在画布上描边了一个红色的 “Hello World” 文本。

6. 绘制图像

在Canvas中，可以使用 drawImage() 方法在画布上绘制图像。使用这个方法需要一个Image对象，也可以使用视频或者画布作为源。