HTML | 画布 beginPath() 方法

简介

beginPath() 方法是 HTML 画布中用于起始新路径或重置当前路径的方法。一旦调用了 beginPath()，前面的路径就会被废弃，而 moveTo() 方法的下一个点将会成为新路径的起点。

相当于在画布上新开一个“画布”。

语法

ctx.beginPath();

其中，ctx 是一个变量名，通常用于表示当前画布上下文。beginPath() 方法没有传入参数。

示例

以下是一个使用 beginPath() 方法的示例：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.querySelector('#myCanvas');
  const ctx = canvas.getContext('2d');
  
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 50, 50);
  
  ctx.beginPath();
  ctx.fillStyle = 'blue';
  ctx.arc(100, 50, 30, 0, 2*Math.PI);
  ctx.fill();
</script>

首先，在画布上绘制一个红色矩形。

然后，调用 beginPath() 方法，开启一个新的路径。

接着，使用 arc() 方法绘制一个蓝色圆形，并使用 fill() 方法填充形状。

由于 beginPath() 方法的存在，这个圆形并没有和上面那个矩形连续起来，而是作为一个新的“子画布”被绘制出来了。

注意事项

• 每次调用 beginPath() 方法，都会清空之前的路径。如果不小心在已有路径的基础上绘制，可能会覆盖之前的内容。
• beginPath() 方法调用时，如果正在进行的路径长度为零，则这个方法不会起到任何作用。