将事件绑定到画布上形状

如何将事件绑定到画布上绘制的形状？我推测这会工作，但我得到一个错误。将事件绑定到画布上形状

<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

将事件绑定到画布上形状

回答

相关问题