logo标签列表

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

javascripthtmlcanvas
5
我该如何将事件绑定到画布上绘制的形状上？我以为这样做会起作用，但是我收到了一个错误。
<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 画布库。 - kangax
3个回答
4
使用 KineticJS，您可以按照以下方式处理画布中的形状事件:
<script>
  shape.on('mousedown mouseover' function(evt) {
    // do something
  });
</script>
4
将事件处理程序放在画布元素上，然后使用鼠标位置来确定事件发生在画布的哪个概念部分。
我没有太多地使用canvas，但如果已经有一些库可以帮助您管理事件委托到这些虚拟元素，我不会感到惊讶。
3
听起来你应该使用svg，因为它允许您在形状上添加事件监听器。我建议先查看raphaeljs.com。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接