CanvasRenderingContext2D: Methode 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.

Die Methode CanvasRenderingContext2D.drawFocusIfNeeded() der Canvas 2D API zeichnet einen Fokusring um den aktuellen oder gegebenen Pfad, wenn das angegebene Element fokussiert ist.

Syntax

js
drawFocusIfNeeded(element)
drawFocusIfNeeded(path, element)

Parameter

element

Das Element, um zu prüfen, ob es fokussiert ist oder nicht.

path

Ein Path2D Pfad, der verwendet werden soll.

Rückgabewert

Keiner (undefined).

Beispiele

Verwalten des Fokus von Schaltflächen

Dieses Beispiel zeichnet zwei Schaltflächen auf eine Leinwand. Die Methode drawFocusIfNeeded() wird verwendet, um bei Bedarf einen Fokusring zu zeichnen.

HTML

html
<canvas id="canvas">
  <button id="button1">Continue</button>
  <button id="button2">Quit</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) {
  // Calculate click coordinates
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;

  // Focus button1, if appropriate
  drawButton(button1, 20, 20);
  if (ctx.isPointInPath(x, y)) {
    button1.focus();
  }

  // Focus button2, if appropriate
  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;

  // Button background
  ctx.fillStyle = active ? "pink" : "lightgray";
  ctx.fillRect(x, y, width, height);

  // Button text
  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);

  // Define clickable area
  ctx.beginPath();
  ctx.rect(x, y, width, height);

  // Draw focus ring, if appropriate
  ctx.drawFocusIfNeeded(el);
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch