獲取畫布上的滑鼠位置

2022-09-12 09:42:16 字數 806 閱讀 4307

在畫布上繪製一些效果的時候,會需要用到畫布上的滑鼠的位置.

會用到的知識點:

1. .getboundingclientrect(), 這個方法返回乙個矩形物件,包含四個屬性:left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離

var box=document.getelementbyid('box');         // 獲取元素

alert(box.getboundingclientrect().top);         // 元素上邊距離頁面上邊的距離

alert(box.getboundingclientrect().right);       // 元素右邊距離頁面左邊的距離

alert(box.getboundingclientrect().bottom);      // 元素下邊距離頁面上邊的距離

alert(box.getboundingclientrect().left);        // 元素左邊距離頁面左邊的距離

注意:ie、firefox3+、opera9.5、chrome、safari支援,在ie中,預設座標從(2,2)開始計算,導致最終距離比其他瀏覽器多出兩個畫素,我們需要做個相容。

document.documentelement.clienttop;  // 非ie為0,ie為2

document.documentelement.clientleft; // 非ie為0,ie為2

function ggetrect (element) , false);

function windowtocanvas(canvas, x, y) ;

獲取滑鼠位置

clientx 設定或獲取滑鼠指標位置相對於視窗客戶區域的 x 座標,其中客戶區域不包括視窗自身的控制項和滾動條。clienty 設定或獲取滑鼠指標位置相對於視窗客戶區域的 y 座標,其中客戶區域不包括視窗自身的控制項和滾動條。offsetx 設定或獲取滑鼠指標位置相對於觸發事件的物件的 x 座標。...

獲取滑鼠位置

ie 下獲取 clientx y 測試測試 firefox 下獲取 clentx y 測試測試 進而核心可以公升階 var z e.clientx event.clientx 滑鼠橫座標 var f e.clienty event.clienty 滑鼠縱座標 這樣一來就可以在ie和firefox中都...

react獲取滑鼠位置 js實時獲取滑鼠所在座標

有的時候我們希望實時獲取滑鼠所在的位置。為什麼會用到它呢?可能你會遇到這樣的情況,我們需要判斷滑鼠是不是在乙個dom元素的上 下 左 右的位置,至於是不是在元素上,就不需要通過獲取位置了,你可以直接用hover來判斷就好了。那麼如何實現獲取滑鼠所在位置呢 function getmousepos e...