HTML Canvas - beginPath() 方法

HTML Canvas 的beginPath() 方法是CanvasRenderingContext2D 接口的一个方法，它在 Canvas 元素中创建一个空路径来绘制形状。

只有当 Canvas 上下文中需要新路径时才调用此方法。如果要绘制的路径有多个，则必须使用相同数量的beginPath() 方法。

语法

以下是 HTML Canvas beginPath() 方法的语法：

CanvasRenderingContext2D.beginPath();

参数

它不接受任何参数，因为它只是一个返回方法，只执行创建空路径的单一任务。

返回值

它创建一个空路径，可用于在 Canvas 元素内绘制各种形状。它不直接返回任何内容，而是提供一个路径。

示例

在下面的示例中，我们使用 HTML Canvas beginPath() 方法创建一个空路径，并在其上绘制简单的线条。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="250" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.moveTo(150, 50);
         context.lineTo(150, 120);
         context.lineTo(50, 190);
         context.stroke();
      </script>
   </body>
</html>

输出

以下代码在网页上返回的输出为：

示例

下面的例子使用线条在 Canvas 元素内绘制一个直角三角形，之前使用 beginPath() 方法创建了路径。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="250" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.moveTo(50, 50);
         context.lineTo(50, 150);
         context.lineTo(150, 50);
         context.lineTo(50, 50);
         context.stroke();
      </script>
   </body>
</html>

输出

以上代码在网页上返回的输出为：

html_canvas_paths.htm

打印页面