HTML Canvas closepath() 方法

在 HTML Canvas 中，closePath() 方法用于连接当前绘图点与起始点，形成一个闭合路径。这个方法通常与 beginPath() 方法一起使用，用于绘制闭合图形，比如多边形或者闭合的曲线。

语法

context.closePath();

参数

closePath() 方法没有参数。

返回值

closePath() 方法没有返回值。

示例

下面是一个使用 closePath() 方法绘制一个闭合多边形的例子：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Canvas closePath() 方法示例</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(50, 50);
    context.lineTo(150, 50);
    context.lineTo(150, 150);
    context.lineTo(50, 150);
    context.closePath();
    context.stroke();
  </script>
</body>
</html>

在这个示例中，我们首先使用 beginPath() 方法开始绘制路径，然后使用 moveTo() 和 lineTo() 方法绘制四条边，最后使用 closePath() 方法将路径闭合，并使用 stroke() 方法绘制路径。

注意事项

• closePath() 方法必须在路径绘制完成后调用，用于将最后一个绘图点与起始点连接起来。
• 如果路径没有闭合，closePath() 方法会自动将最后一个绘图点与起始点连接，形成一个闭合路径。
• closePath() 方法不会填充路径，如果需要填充闭合路径，可以使用 fill() 方法。

通过学习和掌握 closePath() 方法的使用，可以更加灵活地绘制各种闭合图形，为 HTML Canvas 的绘图功能增添更多可能性。