通过html画布获得点击

如果跨浏览器功能不是一个要求,那么有一个简单的解决方案。在支持非SVG元素的浏览器上(webkit、Mozilla和其他浏览器,尤其是IE),可以使用css属性 指针事件 . 从MDN:

除了指示该元素不是鼠标事件的目标之外,值none还指示鼠标事件“穿过”该元素,并将该元素“下面”的内容作为目标。

"

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

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

假设你不能把链接放在画布上。。。

#canvas { pointer-events:none; }

对于IE+较旧的浏览器,还有一个肮脏的解决方法(您可以删除对jQuery的依赖):

jQuery('#canvas').click(function(e) {
    window.location = jQuery('#element-under-canvas').attr('href');
});

显然,这只支持当前的锚定,您需要知道画布下的特定元素(或者可以使用jQuery选择器magic找到它)。

我可以通过如下方式设置画布来实现这一点:

<div>
    <a href='#'>my link</a>
    <canvas></canvas>
</div>

然后在CSS中将其设置为:

canvas {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index:-1; /* NOT SURE HOW SUPPORTED THIS IS, IT WORKED IN CHROME */
}

希望这有帮助!

简单的回答是你不能通过点击。

但第二个最简短的答案是,你确实可以做任何你内心渴望的事!你只要愿意对解决方案有点陌生就行了。

我能想到的第一种方法有点让人抓狂,但很简单:对于画布后面的每一件物品,做一个 类似的秘密物品 在画布前。然后将您想要的事件放在机密项上:

<!-- A visible button behind the canvas -->
<button id="but" type="button" style="position: absolute; top: 100px; left: 100px;">Click Me!</button>

<canvas id="can" width="500" height="500" style="position: absolute;"></canvas>

<!-- A near copy of the visible button, but this one is invisible and in front of the canvas! -->
<button id="but" type="button" onclick="alert('click!')" style="position: absolute; top: 100px; left: 100px; opacity: 0;">Click Me!</button>

如果你想看到代码的运行 click here

借用Simon Sarris的答案,在某些情况下,将画布和控件放在同一平面上可能更简单。根据控件的不同,它并不总是允许画布在控件的顶部绘制,但是在Joe最初的问题中似乎不需要这样做。重要的是要确保canvas和控件在同一个Z平面上,都有一个使用“position”关键字的样式,并且控件的HTML在canvas语句之后。下面是使用此方法将画布与控件组合在一起的示例。

<canvas id="can" width="500" height="500" style="z-index:2; position: absolute;"></canvas>
<!-- Put text and a link on the same plane as the canvas -->
<div style="position: relative; z-index: 2;">
   <a href="http://www.google.com/">Click</a> this Google link.
</div>

不幸的是我的另一种方法不会 你有一个接近你的东西 想要。下面是一个透明的例子 后面有一块画布的地图。它 但它实际上只是在展示: jsfiddle.net/un9yW/11 当然,你在做什么 这种方法意味着没有办法 制作一个绿色的盒子来完全覆盖 地图的一部分,以此类推 有点蹩脚。我会让你知道如果我 为了你的处境。西蒙·萨里斯7 几个小时前

我有一个圆形的用户界面设备(绘制在一个普通的HTML5画布上,它是一个正方形)。 只有圆形是彩色的,画布的其余部分是透明的,我想点击它。在正方形画布的角落下,舞台上有各种形状。

正常情况下

但您可以将click事件发送到一个动态形状,并激活该形状中的事件侦听器,如下所示:

    $( '#myCanvasUserInterfaceLayer' ).on( 'click', function( e ) {

        var pos = getMousePos( e );
        var obscuredKineticShape = kineticLayer.getIntersection( pos );

   // (Note: console.log(obscuredKineticShape) and you find that 
   // 'getIntersection' returns an object with the topmost shape 
   //  at the click point on the kinetic stage within it, called 'shape').

        obscuredKineticShape.shape.fire( 'mousedown' ); 

    });

     function getMousePos( e ) {

        return {
          x: e.pageX,
          y: e.pageY
        };
      }

如果需要使用控件,请将其z索引设置为高于画布。 如果需要使用canvas-set,它的z索引比控件高。 具体的方法取决于你的情况。您可以监听mousedown/mouseup事件,或者在某些区域上监听mousemove。

设置画布 styles.pointerEvents 设置为“无”将允许触发底层的鼠标单击事件。

this.canvas = this.renderer2.createElement('canvas'); // create the canvas 
this.canvas.style.pointerEvents = "none";