Question

将Canvas元素转换为链接的最佳方法是什么 - 我指的是整个画布元素，而不仅仅是图像的一部分。

我尝试了一个显而易见的事情 - 将元素包装在A元素中 - 但在IE9中找到问题。

以此标记为例：

<a href="#link">
  <canvas width="100" height="100">
    //fallback
  </canvas>
</a>

使用CSS我已经设置链接背景颜色在悬停时更改，并且我发现在大多数现代画布支持浏览器中它按预期工作 - 你悬停，背景改变颜色，你点击链接，链接被跟随。 / p>

但是，在IE9中，当鼠标悬停在元素上时，它无法识别出它是一个链接 - 没有悬停效果，没有光标变为指针，点击就可以了。

有趣的是，如果我向A元素添加1像素边框，并将鼠标悬停在1像素边框上，IE9会识别链接，之后您可以将鼠标移到画布上并保持悬停陈述并作为一个链接。

这几乎就像画布覆盖链接一样，所以浏览器无法识别链接，只能识别画布元素 - 如果这有意义的话？

所以，我真的只想确定一下：

由于

更新

好的，所以我在下面的答案都是正确的，但不幸的是，我的实现也没有。我的标记比上面的简化示例复杂得多，所以我猜测实际上还有其他东西在起作用导致问题 - 本机悬停事件和附带JavaScript的事件 - 没有任何工作。

但是，我想出了一个解决问题的黑客。我给链接一个RGBA背景颜色，不透明度为零。一旦那样，事情就好了。奇怪我知道，但修复了：）

Answer 1

我不是100％关于IE中canvas元素的问题，但你可以更新canvas元素的onclick处理程序，将窗口位置更改为你想要的位置。

document.getElementById("mycanvas").onclick = function(e){
    window.location.href = 'http://www.google.com';
};

如果需要，您可以处理其他事件（如mousein / mouseout）来设置光标。

Answer 2

您可以使用javascript的onclick来处理此问题，并将其与CSS结合使用cursor: pointer;。然后，您可以在CSS中为悬停效果实现canvas:hover。您可以将其与<a>结合使用，以允许用户通过链接/画布“标签”。

Answer 3

不确定是否要使用jQuery，但如果是这样，请尝试使用它。

$("#myCanvasId").click(function(){
window.open("https://www.google.com");
});

Answer 4

跨浏览器的方法是简单地在画布顶部放置一个div，它具有与画布完全相同的像素位置，宽度和高度。然后安装在该div上的click处理程序和使用window.location.href，如前面的答案所示。

...
<canvas id=".. >
<div id="overlay"/>
...