Canvas drawFocusIfNeeded()

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>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.