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的变化:
规范描述
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.drawFocusIfNeeded |
Living Standard |
浏览器兼容性
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
"标识。
参见
- 接口定义,
CanvasRenderingContext2D
.