將事件綁定到畫布上形狀

如何將事件綁定到畫布上繪製的形狀？我推測這會工作，但我得到一個錯誤。將事件綁定到畫布上形狀

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

來源

2010-05-09 Ben Shelock

退房[Fabric.js（http://fabricjs.com）帆布庫。 – kangax 2012-09-30 04:49:26

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

我還沒有用帆布玩過那麼多，但如果已經有一些圖書館幫助你管理事件委託給這些虛構的元素，我不會感到驚訝。

來源

2010-05-09 16:50:43 goat

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

來源

2010-05-10 08:00:56

使用Kineticsjs，你可以處理形狀事件畫布如下：

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

來源

2012-09-29 08:54:20 Pith

將事件綁定到畫布上形狀

回答

相關問題