Javascript 可在Chrome中单击的圆形画布角

我有两张画布。我使用

边界半径

将它们做成圆形。第二个位于第一个内部（使用绝对位置）

我在两个圆圈上都有点击事件。如果单击内部画布，则单击点处的颜色将加载到外部画布中，不透明度从白色到拾取的颜色，最后到黑色。如果单击外部画布，则该点的确切颜色值将加载到底部的文本框中

使用chrome时，我无法点击外部画布的红色区域（如下图所示）。我试过z-idex，弧，但没有任何帮助但在Firefox中，一切都很正常

注意：可以拖动外圈中的拾取器对象。但如果你把它放在红色区域，你将无法在Chrome中再次点击它。单击绿色区域将再次获得其控制权

编辑

为了方便起见，我排除了所有不相关的代码。现在只有一个容器有两个画布。 简单地用两种不同的颜色填充。在chrome和firefox中打开以下fiddle链接。点击不同区域的两个圆环，可以看到chrome和firefox的区别。我想让他们在chrome中表现得像在firefox中一样

注意我最终将在内部画布中绘制一幅图像

---

-

您的问题是因为画布当前始终是矩形的，即使看起来不是矩形的。“边界半径”（Border radius）使除圆以外的边透明，但它仍然不会停止角区域上的Chrome事件。这就是为什么不能单击这些区域中的底部圆

我把它放在一个容器中，这个容器有一个

边界半径

，但是点击事件仍然会发生

话虽如此，你有两个选择。您可以将代码更改为只使用一个具有相同布局类型的画布，每次只在另一个画布之前绘制背景圆。基本上你会画一个圆圈，从黑到白的渐变，使用将二者组合成一个圆圈，然后对雨箱渐变做同样的操作。您必须首先绘制背景圆，因为画布每次都在旧层上绘制

或

您可以使用javascript只检测圆形区域中的点击，这只需要一点数学知识（：此解决方案在下面的编辑中有介绍

在未来，可能会允许画布使用非矩形元素，我实际上不确定，但我们至少还没有这种能力

编辑

好的，在浏览了你的代码之后，在我提供解决方案之前，我应该先介绍一些事情

• 在每次运行的函数之外设置所有有限变量。这意味着您不会将它们（如半径、偏移等）放入

  单击
  函数或经常运行的某个函数中，因为它们不会更改

• 您的“半径”E实际上是“直径”s。

  .rect

  的格式是

  .rect（x，y，宽度（圆直径），高度（圆直径））

• 几乎总是在覆盖像您这样的画布时，您希望使它们的尺寸和起始位置相等，以防止计算错误。最后，使用javascript进行所有相对定位，而不是将其与CSS混合，这会更容易。但是，在这种情况下，由于您使用的是

  边界半径

  而不是

  圆弧

  要做一个圆，保持原样，但要使用javascript定位它
• 这么简单的东西不需要jQuery。如果您担心任何加载速度，我建议您使用普通javascript，基本上只需将

  。click（）

  函数更改为

  。onclick

  函数，但我暂时离开了jQuery
• 您可以使用以下格式在一行中声明多个变量，而无需每次声明

  var

  ：

  var name1 = value1,
      name2 = value2;
  

• 具有相同值的变量，您可以这样声明：

  var name1 = name2 = sameValue;
  

• 当子对象具有

  位置：绝对

  并且您希望它相对于父对象进行定位时，父对象可以具有

  位置：相对
  ，
  位置：固定
  ，或
  位置：绝对
  。在这种情况下，我想您应该想要
  位置：相对

• 当您不为变量声明

  var

  时，它将变为全局变量（未使用上述逗号链接）

现在，我们来讨论解决方案

在与一位朋友交谈后，我意识到我可以做比我原来想象的简单得多的数学计算。我们可以只计算圆的中心，使用它们的半径和一些if语句来确保点击在边界内

在一切都正确设置之后，您可以使用以下命令来检测它是否在每个

function clickHandler(e, r) {
    var ex = e.pageX,
        ey = e.pageY,
        // Distance from click to center
        l = Math.sqrt(Math.pow(cx - ex, 2) + Math.pow(cy - ey, 2));

    if(l > r) { // If the distance is greater than the radius
        if(r === LARGE_RADIUS) { // Outside of the large
            // Do nothing
        } else { // The corner area you were having a problem with
            clickHandler(e, LARGE_RADIUS);
        }
    } else {
        if(r === LARGE_RADIUS) { // Inside the large cirle
            alert('Outer canvas clicked x:' + ex + ',y:' + ey);
        } else { // Inside the small circle
            alert('Inner canvas clicked x:' + ex + ',y:' + ey);
        }
    }
}

// Just call the function with the appropriate radius on click
$(img_canvas).click(function(e) { clickHandler(e, SMALL_RADIUS); });    
$(wheel_canvas).click(function(e) { clickHandler(e, LARGE_RADIUS); });

---

希望上面的评论和代码有足够的意义，我尽我所能把它清理干净。如果你有任何问题，不要犹豫问！

似乎是对的，但你没有告诉我为什么它在

FireFox上运行得很好
FireFox以不同的方式呈现。这就是我所能说的。塔克斯。你能演示一下
只使用一个ca吗具有相同布局类型的NVA（推荐），每次都在对方面前画一个背景圆圈，如果它能让我在chrome上获得和Firefox一样的输出，我想扎克应该得到你的赏金，他说的是真的。Firefox之所以看起来做对了，可能是因为Firefox为你做了这些计算，因为每个人都讨厌这个问题，而FirefoxFirefox的功能通常与其他浏览器有所不同，有时是为了更好，有时不是。它不应该被视为“标准”@Sami Your