HTML Canvas - isPointInStroke() 方法

HTML Canvas 的isPointInStroke() 方法是 Canvas 2D API 的一部分，用於檢查指定的點是否在描邊的路徑內，並使用布林值報告結果。

語法

以下是 HTML Canvas isPointInStroke() 方法的語法：

CanvasRenderingContext2D.isPointInStroke(x, y, path);

引數

以下是此方法的引數列表：

序號	引數及描述
1	x 要檢查的點的 x 座標。
2	y 要檢查的點的 y 座標。
3	path 要參考的路徑，用於檢查提供的點是否在其內部。如果沒有給出路徑，則使用當前路徑。

返回值

當CanvasRenderingContext2D 介面上下文物件訪問isPointInStroke() 方法時，它將返回一個布林值，指示該點是否在描邊的路徑內。

示例 1

下面的示例在 Canvas 元素內繪製一個三角形，並使用 HTML Canvas isPointInStroke() 方法檢查給定點是否在其內部。

<!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 shape is stroked or not at the given point : <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.moveTo(100, 50);
         context.lineTo(50, 100);
         context.lineTo(150, 100);
         context.lineTo(100, 50);
         context.fillStyle = 'brown';
         context.fill();
         context.closePath();
         check.innerText = context.isPointInStroke(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="100" style="border: 1px solid black;"></canvas>
   <p>Check the given shape is stroked or not at the given point : <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.font = '55px Verdana';
         context.fillStyle = 'green';
         context.fillText('Hello', 10, 50);
         check.innerText = context.isPointInStroke(100, 30);
      }
   </script>
</body>
</html>

輸出

以上程式碼在網頁上返回的輸出為：

示例 3

下面的示例在 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="150" style="border: 1px solid black;"></canvas>
   <p>Check the given shape is stroked or not at the given point : <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 = 'grey';
         context.strokeRect(20, 20, 150, 100);
         check.innerText = context.isPointInStroke(100, 100);
      }
   </script>
</body>
</html>

輸出

以上程式碼在網頁上返回的輸出為：

html_canvas_paths.htm

列印頁面