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

打印页面