1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: CanvasRenderingContext2D.drawFocusIfNeeded()
slug: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded
translation_of: Web/API/CanvasRenderingContext2D/drawFocusIfNeeded
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawFocusIfNeeded()</code></strong> 是 Canvas 2D API 用来给当前路径或特定路径绘制焦点的方法，如果给定的元素获取了焦点。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">void <var><em>ctx</em>.drawFocusIfNeeded(element);<var>
void <var><em>ctx</em>.drawFocusIfNeeded(path, element);</var></var></var>
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt>element</dt>
<dd>是否需要设置焦点的元素。</dd>
<dt><code>path</code></dt>
<dd>{{domxref("Path2D")}} 路径。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="使用_drawFocusIfNeeded_方法">使用 <code>drawFocusIfNeeded</code> 方法</h3>
<p>这是一段使用 <code>drawFocusIfNeeded</code> 方法的简单的代码片段。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><canvas id="canvas">
<input id="button" type="range" min="1" max="12">
</canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[9] notranslate">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);
</pre>
<p>修改下面的代码并在线查看 canvas的变化：</p>
<div style="display: none;">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html notranslate"><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>
</pre>
<pre class="brush: js notranslate">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);
</pre>
</div>
<p>{{EmbedLiveSample('Playable_code', 700, 360)}}</p>
<h2 id="规范描述">规范描述</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawfocusifneeded", "CanvasRenderingContext2D.drawFocusIfNeeded")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.CanvasRenderingContext2D.drawFocusIfNeeded")}}</p>
<h3 id="兼容性注解">兼容性注解</h3>
<ul>
<li>[1] 在 Gecko 28 {{geckoRelease(28)}}中， 此方法通过 "<code>drawSystemFocusRing</code>" 实现， 但是在 Gecko 29 {{geckoRelease(29)}}中已经改名。</li>
<li>[1] 在 Gecko 32 {{geckoRelease(32)}} 之前，此方法默认是无效的，受控于 flag "<code>canvas.focusring.enabled</code>"标识。</li>
</ul>
<h2 id="参见">参见</h2>
<ul>
<li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li>
</ul>
|
