canvas获取鼠标事件的点数

我有以下function来获取鼠标点击位置（坐标）。

$('#myCanvas').on('click', function(e) { event = e; event = event || window.event; var canvas = document.getElementById('myCanvas'), x = event.pageX - canvas.offsetLeft, y = event.pageY - canvas.offsetTop; alert(x + ' ' + y); }); 

我需要在点击一个位置时获得鼠标点，并在拖动鼠标点位置后将其锁定。

即，mousedown point和mouseup points。

Answer 1

尝试一些不同的设置：

 var canvas = myCanvas; //store canvas outside event loop var isDown = false; //flag we use to keep track var x1, y1, x2, y2; //to store the coords // when mouse button is clicked and held $('#myCanvas').on('mousedown', function(e){ if (isDown === false) { isDown = true; var pos = getMousePos(canvas, e); x1 = pos.x; y1 = pos.y; } }); // when mouse button is released (note: window, not canvas here) $(window).on('mouseup', function(e){ if (isDown === true) { var pos = getMousePos(canvas, e); x2 = pos.x; y2 = pos.y; isDown = false; //we got two sets of coords, process them alert(x1 + ',' + y1 + ',' +x2 + ',' +y2); } }); // get mouse pos relative to canvas (yours is fine, this is just different) function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } 

那我们为什么要在window上听鼠标呢？ 如果您将鼠标放在canvas外部然后释放鼠标按钮，则不会在canvas注册该事件。 所以我们需要听一个全局事件，比如window 。

由于我们已经在鼠标按下事件中标记了我们的isDown ，因此我们知道以下鼠标“属于”canvas（因为我们检查了isDown标志）。

Answer 2

使用接收器，如$（’＃myCanvas’）。mousedown和$（’＃myCanvas’）。mouseup

Answer 3

那么，你需要拖拉吗？ 嗯，这很容易：首先你检测到’onclick’如果指向你的目标内部（矩形，圆形，无论如何）保存指向变量，’onmousemove’你移动对象然后’onmousedown’你得到最后一点。

希望它能帮到你！