在畫布上繪製一些效果的時候,會需要用到畫布上的滑鼠的位置.
會用到的知識點:
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...