Question

如何将事件绑定到画布上绘制的形状？我认为这会有效，但我收到了错误。

<html>
    <head>
    <script type="application/javascript">
    function draw() {   
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");      
        ctx.fillStyle = "rgb(200,0,0)";
        var rec = ctx.fillRect (0, 0, 55, 50);

        rec.onclick = function(){
            alert('something');
        }
    }
    </script>
    </head>
    <body onLoad="draw()">
        <canvas id="canvas" width="300" height="300"></canvas>
    </body>
</html>

Answer 1

将事件处理程序放在canvas元素上，然后使用鼠标位置来决定事件发生在画布的哪个概念部分。

我没有玩过那么多画布，但如果已经有一些图书馆可以帮助你管理事件委托给这些虚构的元素，我不会感到惊讶。

Answer 2

使用Kineticsjs，您可以按如下方式处理画布中的形状事件：

<script>
  shape.on('mousedown mouseover' function(evt) {
    // do something
  });
</script>

Answer 3

听起来你应该使用svg，因为它允许你在形状上添加事件监听器。我建议您先查看raphaeljs.com。

将事件绑定到画布上

3 个答案: