代码之家  ›  专栏  ›  技术社区  ›  Krisztián Balla

在Google Chrome中,画布热门区域仍然可用吗?

  •  0
  • Krisztián Balla  · 技术社区  · 6 年前

    我们在用实验 命中区域 由于可访问性的原因,我们的web应用程序中的功能。我们刚刚发现这个功能在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>

    运行上面的代码段:

    • 如果特征是 supported and enabled 在浏览器中,它应该画一个笑脸,移动鼠标在眼睛上方应该会打开一个警告框。
    • 如果这个功能没有激活,脸上应该是悲伤的。

    这个演示在Firefox 61.0.1中运行,但在Google Chrome 67.0.3396.99中没有运行,我在下面找不到相应的标志 chrome://flags/ 使能。有人知道这个功能是否被删除了吗?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Cerbrus    6 年前

    在最新的金丝雀中,“实验性画布特性”标志已经从铬合金中移除( CL ). 要使用实验性画布功能,可以打开“实验性Web平台功能”标志。
    ( source )

    这是你要找的新国旗:

    enter image description here

    如果启用该标志,则代码片段将呈现开心的笑脸。