javascript - 在 javascript 中处理 Canvas 的 OnClick 事件并获取其坐标

Question

我有一个 Canvas 可以这样画

<div id="canvas" style="position:relative;width:600px;height:300px;" onclick="q()"></div>

我需要在点击它时处理该事件并获取它在 Canvas 上被点击的坐标

Answer 1

您需要获取页面的 x 和 y 坐标，然后减去 canvas 偏移量以获得它们相对于 canvas 的偏移量。

function q(event) {
    event = event || window.event;

    var canvas = document.getElementById('canvas'),
        x = event.pageX - canvas.offsetLeft,
        y = event.pageY - canvas.offsetTop;

    alert(x + ' ' + y);
}

jsFiddle .

您应该考虑以不显眼的方式附加事件，即不使用 onclick HTML 属性。