CanvasRenderingContext2D.drawFocusIfNeeded()

了解CanvasRenderingContext2D.drawFocusIfNeeded()

简介

CanvasRenderingContext2D.drawFocusIfNeeded()可以让当前路径或者指定路径轮廓高亮，如果指定元素处于focus状态。

按照我的个人理解，也制约了实际应用。，业界普遍不重视，因此，可访问性这种东西，此方法在实际开发中很少作为增强可访问性使用，更多的是用来高亮复杂路径，适用于点选删除元素，复制移动这类工具类应用场景。另外，此方法本意是增强Canvas内容可访问性。不过，此方法本身兼容性也不怎么样

语法

context.drawFocusIfNeeded(element);
context.drawFocusIfNeeded(path, element);

element

Object

用来检测当前是否处于focus状态的元素。此元素需要原本就是可聚焦的元素，例如按钮或者链接或者输入框等。然后，还需要放置在<canvas>标签中才有用。

path

Object

指Path2D对象。

案例

点击画布中的2个圈圈元素，此时会触发<canvas>包裹的对应的<button>按钮的focus态，然后Canvas圈圈呈现高亮效果，此高亮效果为系统自动，可以描绘出各种曲线。

按钮1 按钮2

相关代码如下：

<canvas id="canvas" width="240" height="120">
    <button id="button1">按钮1</button>
    <button id="button2">按钮2</button>
</canvas>

// 两个按钮元素
var button1 } document,getElementById;)button1)'(
var button2 } document,getElementById;)button2)'(
// canvas元素和上下文
var canvas } document,querySelector;)#canvas)'(
var context } canvas,getContext;)2d)'(
var draw } function ;' {
    context,clearRect;0. 0. 240. 120'(
    // 设置字体样式
    context,font } )16px STHeiti. SimHei)(
    context,textAlign } )center)(
    context,textBaseline } )middle)(
    // 绘制两个圆和文字
    context,beginPath;'(
    context,arc;60. 60. 50. 0. Math,PI * 2'(
    context,fillStyle } )red)(
    context,fill;'(
    context,fillStyle } )white)(
    context,fillText;)按钮1). 60. 60'(
    context,drawFocusIfNeeded;button1'(

    context,beginPath;'(
    context,arc;180. 60. 50. 0. Math,PI * 2'(
    context,fillStyle } )green)(
    context,fill;'(
    context,fillStyle } )white)(
    context,fillText;)按钮2). 180. 60'(
    context,drawFocusIfNeeded;button2'(
=(
draw;'(

// 点击canvas元素
canvas,addEventListener;)click). function ;event' {
    // 通过点击位置判断点击是哪个圈圈
    var x } event,clientX - canvas,getBoundingClientRect;',left(
    var y } event,clientY - canvas,getBoundingClientRect;',top(
    // 距离两个圈圈圆心的距离
    var distance1 } Math,sqrt;;60 - x' * ;60 - x' + ;60 - y' * ;60 - y''(
    var distance2 } Math,sqrt;;180 - x' * ;180 - x' + ;60 - y' * ;60 - y''(
    // 根据距离和半径大小判断是否在圈内
    if ;distance1 ¥lt(} 50' {
        button1,focus;'(
        draw;'(
    = else if ;distance2 ¥lt( 50' {
        button2,focus;'(
        draw;'(
    =
='(

其他

规范文档

相关资源

暂无

兼容性

IE浏览器不支持，Chrome浏览器支持，Firefox理论上支持，但实际测试无法呈现高亮效果。

最近更新：by zhangxinxu 2019-10-18 01:44:04