Google Chrome浏览器中仍然可以使用画布热门区域吗?

时间:2018-08-09 07:08:27

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

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

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

employees: any[];
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);
  }
});

运行上面的代码段:

  • 如果该功能在浏览器中为supported and enabled,则该功能应绘制一张笑脸,并将鼠标移到眼睛上方,这将打开一个警告框。
  • 如果该功能未激活,则脸部应该难过。

该演示在Firefox 61.0.1中工作,但在Google Chrome 67.0.3396.99中工作,并且我无法在<canvas id="canvas"></canvas>下找到相应的标记来启用它。有人知道该功能是否已删除吗?

1 个答案:

答案 0 :(得分:2)

  

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

这是您要查找的新标志:

enter image description here

如果启用该标志,您的代码段将呈现出幸福的笑脸。