当前位置：首页 > backend >正文

Canvas基础篇：图形绘制

backend 2025/5/1 10:46:19

Canvas基础篇：图形绘制

图形绘制
- moveTo()
- lineTo()
- - lineTo绘制一条直线
  - - 代码示例
    - 效果预览
  - lineTo绘制平行线
  - - 代码示例
    - 效果预览
  - lineTo绘制矩形
  - - 代码示例
    - 效果预览
- arc()
- - arc绘制一个圆
  - - 代码实现
    - 效果预览
  - arc绘制一段弧
  - - 代码实现
    - 效果预览
- arcTo()
- rect()
- 曲线
结语

图形绘制

在之前的文章 Canvas基础篇：路径绘制中，讲述了图形绘制的四个步骤以及图形开始路径、闭合路径、边框模式和填充模式。
本文将讲解在Canvas中，常见的几种图形绘制API。

moveTo()

moveTo()：将笔触移动到指定的坐标 x 以及 y 上，该方法本身并不能画出任何东西，可以理解为在Canvas上绘图，需要落笔的起始位置。通常跟在 beginPath() 后面使用，或者在Canvas初始化时使用，其语法如下所示：

moveTo(x, y)

lineTo()

lineTo()方法用于绘制一条直线，其语法如下所示：

lineTo(x, y)

lineTo绘制一条直线

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制直线</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath();ctx.moveTo(50, 50)ctx.lineTo(100, 100)ctx.stroke()</script>
</body></html>

效果预览

绘制一条直线

lineTo绘制平行线

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制平行线</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.moveTo(50, 50)ctx.lineTo(150, 50)ctx.stroke()ctx.beginPath()ctx.moveTo(50, 100)ctx.lineTo(150, 100)ctx.stroke()</script>
</body></html>

效果预览

平行线

lineTo绘制矩形

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制矩形</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.moveTo(50, 50)ctx.lineTo(150, 50)ctx.lineTo(150, 100)ctx.lineTo(50, 100)ctx.lineTo(50, 50)ctx.stroke()</script>
</body></html>

效果预览

绘制矩形

arc()

arc()方法可以用来画一个圆或者画一个圆弧，，其语法如下所示：

arc(x, y, radius, startAngle, endAngle, anticlockwise)

其中，(x, y)代表圆心坐标；radius代表圆形半径；startAngle和endAngle分别代表起始角度和终止角度；anticlockwise取值为布尔值，用来标记是顺时针画圆还是逆时针画圆：值为true（默认值），表示顺时针；值为false表示逆时针。
注：startAngle和endAngle是以弧度为单位，如180°应该是Math.PI
度数到弧度的转换公式：
$弧度 = 度数 * M a t h . P I /180$

arc绘制一个圆

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制圆</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.arc(100, 100, 50, 0, 2 * Math.PI, true)ctx.fill()</script>
</body></html>

效果预览

arc绘制一段弧

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制弧</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.arc(100, 100, 50, 0, 90 * Math.PI / 180, false)ctx.closePath()ctx.stroke()</script>
</body></html>