Canvas drawFocusIfNeeded() - Canvas 基础教程

drawFocusIfNeeded() 是特别废材的一个 API ，我都不知道拿来做什么用

我们知道 <canvas> 是 HTML 的一个元素，而且是一个块级元素，也就是说它可以包含其它的元素，比如 <span> ，比如 <input>

如果被包含的元素获得了焦点，一般情况下是不会像普通的元素那样有焦点效果 (比如虚线边框和蓝色边框)

如果你想让这些元素有焦点效果，可以使用 drawFocusIfNeeded() 给它绘制一个焦点效果或者使用使用系统默认的焦点效果

Canvas drawFocusIfNeeded() 方法

ctx.drawFocusIfNeeded() 方法给当前路径或特定路径绘制焦点的方法，如果给定的元素获取了焦点

语法

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

参数	说明
element	是否需要设置焦点的元素
path	Path2D 路径

范例

我们给 <canvas> 里的 <input> 元素绘制一个焦点效果

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="520" height="300">
    <input id="button" type="text" size="40">
</canvas>
</div>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
var button = document.getElementById("button");

button.focus();

ctx.beginPath();
ctx.rect(10, 10, 80, 40);
ctx.drawFocusIfNeeded(button);
</script>

运行结果如下