javascript – 将HTML5 canvas元素转换为链接

发布时间：2020-12-14 23:15:23 所属栏目：资源来源：网络整理

导读：将Canvas元素转换为链接的最佳方法是什么我指的是整个画布元素,而不仅仅是图像的一部分. 我尝试过一个显而易见的事情将元素包装在A元素中但在IE9中查找问题. 以此标记为例：使用CSS我已经设置链接背景颜色在悬停时更改,并且我发现在大多数现代画布支持浏

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

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

以此标记为例：


使用CSS我已经设置链接背景颜色在悬停时更改,并且我发现在大多数现代画布支持浏览器中它按预期工作 – 你悬停,背景改变颜色,你点击链接,链接被遵循.
但是,在IE9中,当鼠标悬停在元素上时,它无法识别出它是一个链接 – 没有悬停效果,没有光标变为指针,单击会立即执行.
有趣的是,如果我向A元素添加1像素边框,并将鼠标悬停在1像素边框上,IE9会识别链接,之后您可以将鼠标移到画布上并保持其悬停状态并正常工作作为一个链接.
这几乎就像画布覆盖链接一样,因此浏览器无法识别链接,只能识别画布元素 – 如果这有意义的话？
所以,我真的只想确定一下：
>简单地将Canvas元素包装在A元素中是可以接受的 – 这只是IE9很奇怪还是我做错了？
>如果我做错了,做这个看似简单的任务的公认技术是什么？
谢谢
UPDATE
好的,所以我在下面的答案都是正确的,但不幸的是,我的实现也没有.我的标记比上面的简化示例复杂得多,所以我猜测实际上还有其他东西正在引起问题 – 本机悬停事件和附带JavaScript的事件 – 没有什么工作.
但是,我想出了一个解决问题的黑客.我给链接一个RGBA背景颜色,不透明度为零.一旦那样,事情就好了.奇怪我知道,但修复:)


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

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

示例：http://jsfiddle.net/jonathon/HtmVS/
如果需要,您可以处理其他事件(如mousein / mouSEOut)来设置光标.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!