標籤: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擷取滑鼠點擊座標