HTML 畫布 - drawFocusIfNeeded() 方法

HTML 畫布 drawFocusIfNeeded() 方法屬於來自畫布 2D API 的 CanvasRenderingContext2D 介面，可為現有路徑或提供路徑新增焦點。

語法

以下是 HTML 畫布 drawFocusIfNeeded() 方法的語法：

CanvasRenderingContext2D.drawFocusIfNeeded(given_path, element);

引數

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

序號	引數及描述
1	given_path 畫布中可用的路徑。
2	element 畫布中的當前元素，用於檢查它是否有焦點。

返回值

對於現有路徑或新路徑，使用上述方法對其元素進行聚焦並返回。

示例

以下示例使用 HTML 畫布 drawFocusIfNeeded() 方法在需要時為矩形按鈕新增焦點。

<!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="300" height="200" style="border: 1px solid black;">
      <input id="button" type="range" min="1" max="10">
   </canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         var button = document.getElementById("button");
         button.focus();
         context.beginPath();
         context.rect(20, 20, 100, 75);
         context.drawFocusIfNeeded(button);
      }
   </script>
</body>
</html>

輸出

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

示例

以下示例在需要時為圓形按鈕新增焦點。

<!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="300" height="200" style="border: 1px solid black;">
      <input id="button" type="range" min="1" max="10">
   </canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         var button = document.getElementById("button");
         button.focus();
         context.beginPath();
         context.arc(100, 100, 75, 0, 2 * Math.PI);
         context.drawFocusIfNeeded(button);
      }
   </script>
</body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面