將事件綁定到畫布上

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

使用Kineticsjs ，您可以在畫布中處理形狀事件，如下所示：

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

Answer 2

將事件處理程序放在canvas元素上，然后使用鼠標位置來決定事件發生在畫布的哪個概念部分。

我沒有玩過那么多畫布，但如果已經有一些圖書館可以幫助你管理事件委托給這些想象中的元素，我也不會感到驚訝。

Answer 3

聽起來你應該使用svg，因為它允許你在形狀上添加事件監聽器。 我建議您先查看raphaeljs.com 。

將事件綁定到畫布上

問題描述

3 個解決方案

解決方案1
4 2012-09-29 08:54:20

解決方案2
4 已采納 2010-05-09 16:50:43

解決方案3
3 2010-05-10 08:00:56

將事件綁定到畫布上

問題描述

3 個解決方案

解決方案1 4 2012-09-29 08:54:20

解決方案2 4 已采納 2010-05-09 16:50:43

解決方案3 3 2010-05-10 08:00:56

解決方案1
4 2012-09-29 08:54:20

解決方案2
4 已采納 2010-05-09 16:50:43

解決方案3
3 2010-05-10 08:00:56