【问题标题】:Are canvas hit regions still available in Google Chrome?Google Chrome 中是否仍提供画布命中区域?
【发布时间】:2019-01-16 13:13:26
【问题描述】:

出于可访问性的原因,我们在 Web 应用程序中使用了实验性的Hit Region 功能。我们刚刚发现此功能不再适用于 Google Chrome。我在官方网站上找不到任何关于它的信息。

以下是“命中区域”功能的简单演示:

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// head
ctx.beginPath();
ctx.arc(100, 100, 75, 0, 2 * Math.PI, false);
ctx.lineWidth = 5;
ctx.stroke();

// eyes
ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.arc(130, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();

try
{
  ctx.addHitRegion({id: "eyes"}); // NO SUPPORT => Exception

  // mouth :-)
  ctx.beginPath();
  ctx.arc(100, 110, 50, 0, Math.PI, false);
  ctx.stroke();
}
catch
{
  // mouth :-(
  ctx.beginPath();
  ctx.arc(100, 160, 40, Math.PI, 0, false);
  ctx.stroke();
}

canvas.addEventListener('mousemove', function(event) {
  if (event.region) {
    alert('hit region: ' + event.region);
  }
});
<canvas id="canvas"></canvas>

运行上面的代码sn-p:

  • 如果浏览器中的特征是supported and enabled,它应该画一个笑脸,将鼠标移到眼睛上应该会打开一个警告框。
  • 如果该功能未激活,则面部应该是悲伤的。

该演示在 Firefox 61.0.1 中运行,但在 Google Chrome 67.0.3396.99 中无法运行,我无法再在 chrome://flags/ 下找到相应的标志来启用它。有人知道这个功能是否被删除了吗?

【问题讨论】:

    标签: javascript google-chrome canvas html5-canvas browser-support


    【解决方案1】:

    在最新的 Canary (CL) 中,“实验性画布功能”标志已从 Chrome 中删除。要使用实验性画布功能,您可以打开“实验性 Web 平台功能”标志。
    (source)

    这是您正在寻找的新标志:

    如果您启用该标志,您的 sn-p 将呈现一个快乐的笑脸。

    【讨论】:

    • 谢谢!我们可以找出他们更改此内容的 Chrome(不是 Canary)的官方版本号吗?
    • @JennyO'Reilly:看来我忘记复制评论中的链接了。
    猜你喜欢
    • 2012-12-07
    • 2020-04-16
    • 1970-01-01
    • 1970-01-01
    • 2017-09-09
    • 2016-03-28
    • 1970-01-01
    • 2021-01-10
    • 2018-10-14
    相关资源
    最近更新 更多