将HTML5 canvas元素转换为链接

Question

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

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

以此标记为例:

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

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

但是,在IE9中,当鼠标悬停在元素上时,它无法识别出它是一个链接 - 没有悬停效果,没有光标变为指针,单击会立即执行.

有趣的是,如果我向A元素添加1像素边框,并将鼠标悬停在1像素边框上,IE9会识别链接,之后您可以将鼠标移到画布上并保持其悬停状态并正常工作作为一个链接.

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

所以,我真的只想确定一下:

谢谢

UPDATE

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

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

Answer 1

我不是百分之百地讨论IE中canvas元素的问题,但你可以更新canvas元素的onclick处理程序,将窗口位置更改为你想要的位置.

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

如果需要,您可以处理其他事件(如mousein/mouseout)来设置光标.

Answer 2

您可以使用 javascriptonclick来处理这个问题，并将其与 CSS 结合起来cursor: pointer;。然后您可以canvas:hover在 CSS 中实现悬停效果。您可以将其与结合起来，<a>以允许用户通过链接/画布“选项卡”。