Canvas 2D APIのCanvasRenderingContext2D
.drawFocusIfNeeded()
メソッドは、パラメーターで与えられた要素がフォーカスした時に、現在のパスもしくは与えられたパスの周りにフォーカスリングを描画します。
構文
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に反映されます:
仕様
仕様 | 策定状況 | コメント |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.drawFocusIfNeeded' in that specification. |
Living Standard |
ブラウザー実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本サポート | (有) | 29 (29)[1] | 未サポート | (有) | (有) |
Pathパラメーター | (有) | 未サポート | 未サポート | (有) | (有) |
機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本サポート | (有) | (有) | 29.0 (29)[1] | 未サポート | (有) | (有) |
Pathパラメーター | (有) | (有) | 未サポート | 未サポート | (有) | (有) |
注記
- [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) より前では、このメソッドは設定を変更しないと有効にならず、有効にするには "
canvas.focusring.enabled
" を変更する必要がありました。
関連情報
CanvasRenderingContext2D
インタフェースがこのメソッドを定義しています。