Canvas基础篇：图形绘制

最新推荐文章于 2025-05-01 23:24:04 发布

wuhen_n

最新推荐文章于 2025-05-01 23:24:04 发布

阅读量852

点赞数 16

分类专栏： Canvas开发攻略：基础+动画+特效文章标签：前端 html5 javascript canva可画 Canvas

本文链接：https://blog.csdn.net/wuhen_n/article/details/147632016

版权

Canvas开发攻略：基础+动画+特效专栏收录该内容

5 篇文章

订阅专栏

图形绘制

在之前的文章 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>