html5 – 通过html画布获取点击

前端之家收集整理的这篇文章主要介绍了html5 – 通过html画布获取点击前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到很多关于如何获取html5画布元素以接收鼠标点击的问题,我正在使用画布作为叠加层,鼠标点击不会通过以下元素。我正在将图像加载到画布中,我认为这可能是问题,但我也尝试了一个空的画布,我得到相同的结果。

这是一个例子:
与图像:
http://www.1luckypixel.com/paranormal/canvas_test.html
链接到谷歌,但它没有注册

我的理解是,画布默认情况下对鼠标是透明的?

解决方法

如果不需要跨浏览器功能,那么有一个简单的解决方案。在支持非SVG元素的浏览器(webkit,Mozilla或者其他,但不是IE)中,您可以使用名为pointer-events的css属性。从MDN:

“CSS属性指针事件允许作者在什么情况下(如果有的话)控制特定图形元素可以成为鼠标事件的目标。当未指定此属性时,visiblePainted值的相同特征适用于SVG内容

除了指示该元素不是鼠标事件的目标之外,值none指示鼠标事件“通过”元素,而是指向该元素的“underneath”。

警告:CSS中的指针事件在非SVG元素中的使用是实验性的。目前在CSS3 UI草案规范中定义,有讨论将其推迟到CSS4。

至少,您可以使用Modernizr来检测指针事件支持,并在不支持它的浏览器上执行Simon Sarris’s answer中提到的不透明度技巧。

另外,如果您的应用程序是特定于谷歌地图,您可以插入您的画布作为谷歌地图覆盖,从而避免了问题在一起。

例:
http://www.patrick-wied.at/static/heatmapjs/demo/maps_heatmap_layer/gmaps.php

猜你在找的HTML5相关文章