将事件绑定到画布上的形状答案

【问题标题】：Bind event to shape on canvas将事件绑定到画布上的形状
【发布时间】：2011-02-17 09:33:17
【问题描述】：

如何将事件绑定到画布上绘制的形状？我认为这会起作用，但我得到了一个错误。

<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>

【问题讨论】：

查看Fabric.js画布库。

标签： javascript html canvas

【解决方案1】：

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

我没怎么玩过画布，但如果已经有一些库可以帮助您管理对这些虚构元素的事件委托，我不会感到惊讶。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：