We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CanvasRenderingContext2D.drawFocusIfNeeded()

CanvasRenderingContext2D.drawFocusIfNeeded() 是 Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法,如果给定的元素获取了焦点。

语法

void ctx.drawFocusIfNeeded(element);
void ctx.drawFocusIfNeeded(path, element);

参数

element
是否需要设置焦点的元素。
path
Path2D 路径。

示例

使用 drawFocusIfNeeded 方法

这是一段使用 drawFocusIfNeeded 方法的简单的代码片段。

HTML

<canvas id="canvas">
  <input id="button" type="range" min="1" max="12">
</canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var button = document.getElementById("button");

button.focus();

ctx.beginPath();
ctx.rect(10, 10, 30, 30);
ctx.drawFocusIfNeeded(button);

修改下面的代码并在线查看 canvas的变化:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas">
<input id="button" type="range" min="1" max="12">
</canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.rect(10, 10, 30, 30);
ctx.drawFocusIfNeeded(button);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var button = document.getElementById("button");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
button.focus();

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.drawFocusIfNeeded
Living Standard  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 29 (29)[1] 未实现 (Yes) (Yes)
Path parameter (Yes) 未实现 未实现 (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 29.0 (29)[1] 未实现 (Yes) (Yes)
Path parameter (Yes) (Yes) 未实现 未实现 (Yes) (Yes)

兼容性注解

  • [1] 在 Gecko 28 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3)中, 此方法通过 "drawSystemFocusRing" 实现, 但是在 Gecko 29 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)中已经改名。
  • [1] 在 Gecko 32 (Firefox 32 / Thunderbird 32 / SeaMonkey 2.29 / Firefox OS 2.0) 之前,此方法默认是无效的,受控于 flag "canvas.focusring.enabled"标识。

参见

文档标签和贡献者

此页面的贡献者: ice-i-snow
最后编辑者: ice-i-snow,