HTML Canvas - isPointInPath() 方法

HTML Canvas 的 isPointInPath() 方法是 Canvas 2D API 的一部分，它检查指定点是否包含在当前路径中，并使用布尔值输出进行报告。

语法

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

CanvasRenderingContext2D.isPointInPath(x, y, path, rule);

参数

以下是此方法的参数列表：

序号	参数及描述
1	x 要检查的点的 x 坐标。
2	y 要检查的点的 y 坐标。
3	path 要参考以检查提供的点是否包含在其中的路径。如果未给出路径，则使用当前路径。
4	rule 用于确定点是否在路径中的算法。此参数采用两个输入值。 nonzero evenodd

返回值

当 CanvasRenderingContext2D 接口上下文对象访问 isPointInPath() 方法时，它会返回一个布尔值，指示点是否在路径中。

示例 1

以下示例在 Canvas 元素中绘制一个圆圈，并使用 HTML Canvas isPointInPath() 方法检查提供的点是否在路径中。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
   <p>Check the given point is in the path : <code id="check">false</code>
   </p>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         var check = document.getElementById("check");
         context.beginPath();
         context.arc(100, 100, 75, 1 * Math.PI, 5 * Math.PI);
         context.fill();
         context.closePath();
         check.innerText = context.isPointInPath(150, 150);
      }
   </script>
</body>
</html>

输出

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

示例 2

以下示例在 Canvas 元素中绘制一个描边的三角形，并检查提供的点是否在路径中。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
   <p>Check the given point is in the shape : <code id="check">false</code>
   </p>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         var check = document.getElementById("check");
         context.strokeStyle = 'blue';
         context.beginPath();
         context.moveTo(100, 50);
         context.lineTo(25, 150);
         context.lineTo(175, 150);
         context.lineTo(100, 50);
         context.stroke();
         context.closePath();
         check.innerText = context.isPointInPath(15, 15);
      }
   </script>
</body>
</html>

输出

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

html_canvas_paths.htm

打印页面