JavaScript擷取滑鼠點擊座標

來源:互聯網
上載者:User

標籤:body   cli   move   use   座標   添加   load   返回   overflow   

如何用JavaScript擷取滑鼠點擊時在canvas畫布上的座標呢:

代碼如下:

--------------------------------------------------------------

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>demo</title> 6     <style type="text/css"> 7         *{ 8             margin:0; 9             padding:0;10         }11         #canvas{12             background:green;13             width:100%;14             height:100%;15         }16         body,html{17             overflow:hidden;18             width:100%;19             height:100%;20         }21     </style>22     <script type="text/javascript">23         window.onload = function(){24             25             var canvas = document.getElementById(‘canvas‘);  //擷取畫布;26 27             var utils = {};  //建立Null 物件;28             canvas.style.height = document.body.clientHeight;  //設定全屏高度;29             utils.captureMouse = function(canvas){  //添加方法;30                 var mouse = {x:0,y:0};  //初始化座標位置;31                 canvas.addEventListener(‘mousemove‘,function(event){   //添加點擊監聽事件32                     var x,y;33                     if(event.pageX || event.pageY){34                         x = event.pageX;35                         y = event.pageY;36                     }else{37                         x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;38                         y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;39                     }40                     x -= canvas.offsetLeft;41                     y -= canvas.offsetTop;42 43                     mouse.x = x;  //擷取x軸座標;44                     mouse.y = y;  //擷取Y軸座標;45                 },false)46                 return mouse;  //返回座標;47             };48 49             mouse = utils.captureMouse(canvas);  //執行個體化對象,傳入參數;50             51             canvas.addEventListener(‘click‘,function(){52                 alert("x: " + mouse.x + ", y: " + mouse.y);  //彈出座標;53             },false);54         };55     </script>56 </head>57 <body>58     <canvas id="canvas"></canvas>  //建立canvas畫布;59 </body>60 </html>

-----------------------------------------------------------

上面就是擷取canvas畫布上的座標值了,將它封裝起來,

放到單獨的js檔案中,需要用的時候再引入進去,就是一

個很好的工具了

-----------------------------------------------------------

感謝你的閱讀,請繼續支援博主哦!!!

 

JavaScript擷取滑鼠點擊座標

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.