[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.drawFocusIfNeeded()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

drawFocusIfNeeded(element)
drawFocusIfNeeded(path, element)

Przykłady:

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 500;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");

 const buttonA = document.getElementById("buttonA");
 const buttonB = document.getElementById("buttonB");
 const buttonC = document.getElementById("buttonC");

 document.addEventListener("focus", rysujB, true);
 document.addEventListener("blur", rysujB, true);
 canvas.addEventListener("click", uchwytKlik, false);

 rysujB();

 function uchwytKlik(e) {

 const x = e.clientX - canvas.offsetLeft;
 const y = e.clientY - canvas.offsetTop;

 rysujButton(buttonA, 20, 20);
 if (ctx.isPointInPath(x, y)) {
 buttonA.focus();
 }

 rysujButton(buttonB, 20, 220);
 if (ctx.isPointInPath(x, y)) {
 buttonB.focus();
 }
 
 rysujButton(buttonC, 20, 420);
 if (ctx.isPointInPath(x, y)) {
 buttonC.focus();
 }
 
 }

 function rysujB() {

 ctx.clearRect(0, 0, canvas.width, canvas.height);
 rysujButton(buttonA, 20, 20);
 rysujButton(buttonB, 20, 220);
 rysujButton(buttonC, 20, 420);
 
 }

 function rysujButton(idButton, x, y) {

 const active = document.activeElement === idButton;
 const width = 400;
 const height = 50;

 ctx.fillStyle = active ? "yellow" : "gray";
 ctx.fillRect(x, y, width, height);

 ctx.font = "20px sans-serif";
 ctx.textBaseline = "middle";
 ctx.textAlign = "center";
 ctx.fillStyle = active ? "black" : "white";
 ctx.fillText(idButton.textContent, x + width / 2, y + height / 2);

 ctx.beginPath();
 ctx.rect(x, y, width, height);

 ctx.drawFocusIfNeeded(idButton);
 
 }

 };

</script>
 
<canvas id="canvas" width="1" height="1">

 <button id="buttonA">przycisk 1</button>
 <button id="buttonB">przycisk 2</button>
 <button id="buttonC">przycisk 3</button>
 
</canvas>

Opis:
Metoda CanvasRenderingContext2D.drawFocusIfNeeded() rysuje pierścień fokusu wokół bieżącej lub zadanej ścieżki, jeśli określony element jest np. wciśnięty. Parametry element - element sprawdzający, czy jest wciśnięty, czy nie, path - ścieżka Path2D do wykorzystania.

Zobacz też:
Path2D - Interfejs
document.addEventListener - 
offsetLeft - 
isPointInPath - 
clearRect -