javascript - 将事件绑定(bind)到 Canvas 上的形状

标签 javascript html canvas

如何将事件绑定(bind)到 Canvas 上绘制的形状?我认为这会起作用,但我收到错误。

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

最佳答案

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

我没怎么玩过 Canvas ,但如果已经有一些库可以帮助您管理对此类虚构元素的事件委托(delegate),我也不会感到惊讶。

关于javascript - 将事件绑定(bind)到 Canvas 上的形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2798194/

相关文章:

html - CORS:Facebook 是否为其所有图片启用了 CORS?

javascript - 使用 Web API 存储库模式编辑/更新

javascript - Electron Java脚本将数据从渲染传递到主要对象,反之亦然

javascript - JS ES6 中 ()=> 和 _=> 和 (_)=> 的区别

html - CSS 下拉菜单在移动浏览器中不起作用

javascript - JS 监控数据使用情况?

javascript - HTML5 Canvas 增强图像

javascript - 使用 Javascript 将单元格数据从一个表拉到另一个表

javascript - React.js 设置输入值

javascript - 在 JavaScript 中从 RGB 像素数组中将图像绘制到屏幕上的最快方法是什么?