【发布时间】: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