【筆記】偵測滑鼠(事件)在Canvas上的位置

使用下列的方法，可以取得滑鼠在Canvas上，相對於Canvas左上角的X、Y的座標。

var getMousePos = function(cv, e){
 var rect = cv.getBoundingClientRect();
 return {
  x: e.clientX - rect.left,//相對於Canvas左上角的X座標
  y: e.clientY - rect.top,//相對於Canvas左上角的Y座標
  rectLeft : rect.left,
  rectTop : rect.top,
  clientX : e.clientX,
  clientY : e.clientY
 }
};

再來在Canvas中畫一個紅色矩形：

var ctx = cv.getContext('2d');
ctx.fillStyle = "#f00";
ctx.fillRect(10, 10, 50, 50);

在上方的Canvas中，紅色區塊相對於Canvas的X軸範圍是10~60，Y軸的範圍也是10~60，因此，我們只要判斷使用getMousePos取得的X、Y座標是落在這範圍內的，就可以針對滑鼠水落在紅色區塊時，去做一些事件上的處理。 先在html中新增一個div來顯示訊息

再來處理Canvas的onmousemove事件：

var cv = document.getElementById('mycv');
cv.addEventListener('mousemove', function(e){
var pos = getMousePos(cv, e);
if(pos.x >= 10 && pos.x <=60 && pos.y >= 10 && pos.y <=60){
 $('#desc').css({'top':pos.y + 'px', 'left':pos.x+'px'}).text('在紅色區塊中');
}else{
 $('#desc').css({'top':pos.y + 'px', 'left':pos.x+'px'}).text('不在紅色區塊中');
}

現在，把滑鼠移入紅色區塊和移出，會看到不同的訊息。