javascript - 鼠标单击 Canvas 的一部分、鼠标悬停在 Canvas 上和鼠标移出 Canvas

Question

我正在尝试为 Canvas 附加鼠标悬停和鼠标移出事件:

默认 Canvas 是函数drawcircle的 Canvas 。

如果用户越过 Canvas ，应将其更改为drawEllipse的 Canvas ，当用户越过 Canvas 时，应将其更改为drawCircle。

此外，我想在用户按下浅蓝色小圆圈时在屏幕上打印一条消息(提醒消息)。

我读到我必须为鼠标悬停和鼠标移出定义: mouseup 和 mousedown 但我真的不知道如何。

http://jsfiddle.net/alonshmiel/c4upM/9/

也许是这样的:

getPressedCanvasPixel('canvas');

function getPressedCanvasPixel(canvasElement) {
    canvas = document.getElementById(canvasElement);
    canvas.addEventListener("mousedown", alertPressedPixel, false);
}

function alertPressedPixel(event) {
    canvas_x = event.pageX;
    canvas_y = event.pageY;
    alert(canvas_x + ' , ' + canvas_y);
}

感谢任何帮助!

Answer 1

使用 jQuery 可以吗？如果是这样，请尝试这样的操作:

$('#canvas').on('mouseenter', function() {
    console.log('enter'); // do your actions
})
.on('mouseleave', function() {
    console.log('exit'); // do your actions
});

对于小圆圈，您需要保存其坐标并处理鼠标单击事件，您实际上是这样做的，因此只需添加检查坐标是否靠近您的圆圈即可。