var mX;
var mY;
若是有要記錄滑鼠的座標位子
就要把變數放外面成為全域變數
取得滑鼠在移動或點擊時觸發事件要使用 addEventListener
cvs.addEventListener('mousedown', function(e){ ... }, false);
// 滑鼠按下時
cvs.addEventListener('mousemove', function(e){ ... }, false);
// 滑鼠移動時
cvs.addEventListener('mouseup', function(e){ ... }, false);
// 滑鼠放開時
cvs.addEventListener('click', function(e){ ... }, false);
// 滑鼠(手機)點擊時
function(e) 刮號中的 e 是為了找到當觸發事件時的屬性、值
其中也包括座標 (x, y)
以取得點擊的座標為例
cvs.addEventListener('click', function(e){
mX = e.clientX - cvs.offsetLeft;
mY = e.clientY - cvs.offsetTop;
})
console.log(mX, mY)
就會看到在每次畫布 cvs 被點擊時的位置
clientX、clientY 取得的值是以視窗的左上(0, 0) 為起點
向右向下找到被點擊的(x, y) 位置
因為取得的 (x, y) 會包含不是畫布的部分
所以用 offset 找到畫布 cvs 和視窗 Left | Right | Top | Bottom 的距離
offsetLeft 和 offsetTop 就是要刪除視窗和畫布之間的距離