CanvasRenderingContext2D:drawFocusIfNeeded() 方法

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Canvas 2D API 的 CanvasRenderingContext2D.drawFocusIfNeeded() 方法用于当指定的元素处于焦点状态时在当前或指定路径周围绘制焦点环。

语法

js
drawFocusIfNeeded(element)
drawFocusIfNeeded(path, element)

参数

element

要检查是否处于焦点状态的元素。

path

Path2D 路径。

返回值

无(undefined)。

示例

管理按钮焦点

这个例子在画布上绘制了两个按钮。使用 drawFocusIfNeeded() 方法在适当的时候绘制焦点环。

HTML

html
<canvas id="canvas">
  <button id="button1">继续</button>
  <button id="button2">退出</button>
</canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");

document.addEventListener("focus", redraw, true);
document.addEventListener("blur", redraw, true);
canvas.addEventListener("click", handleClick, false);
redraw();

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawButton(button1, 20, 20);
  drawButton(button2, 20, 80);
}

function handleClick(e) {
  // 计算点击坐标
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;

  // 如果合适,聚焦 button1
  drawButton(button1, 20, 20);
  if (ctx.isPointInPath(x, y)) {
    button1.focus();
  }

  // 如果合适,聚焦 button2
  drawButton(button2, 20, 80);
  if (ctx.isPointInPath(x, y)) {
    button2.focus();
  }
}

function drawButton(el, x, y) {
  const active = document.activeElement === el;
  const width = 150;
  const height = 40;

  // 按钮背景
  ctx.fillStyle = active ? "pink" : "lightgray";
  ctx.fillRect(x, y, width, height);

  // 按钮文本
  ctx.font = "15px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = active ? "blue" : "black";
  ctx.fillText(el.textContent, x + width / 2, y + height / 2);

  // 定义可点击区域
  ctx.beginPath();
  ctx.rect(x, y, width, height);

  // 如果合适,绘制焦点环
  ctx.drawFocusIfNeeded(el);
}

结果

规范

Specification
HTML
# dom-context-2d-drawfocusifneeded-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
drawFocusIfNeeded
path parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name.
Has more compatibility info.

参见