使用javascript在畫布內獲取鼠標位置

我正在學習jquery和html5畫布。我想要做的只是一個簡單的html5繪圖示例。當鼠標移動時，我在我的鼠標下繪製紅色方塊。使用javascript在畫布內獲取鼠標位置

我的代碼很簡單，但在畫布內獲取鼠標光標位置時遇到問題。

現在，我正在使用x = event.offsetX;獲取鼠標位置。這在Chrome中運行得非常好，但是當涉及到Firefox時，它不起作用。我將代碼更改爲x = event.layerX。但似乎layerX是我的鼠標相對於網頁的位置，而不是畫布的位置。因爲我總是看到一個偏移量。

我有兩個問題，第一，如何在Firefox下獲得正確的鼠標位置是正確的。第二，我如何編寫適用於ie，firefox，chrome，safari和opera的代碼？

這裏是我的代碼：

<!doctype html /> 
<html><head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(
function(){ 

var flip = document.getElementById('flip'); 
    var context = flip.getContext('2d'); 
context.fillStyle = "rgb(255,255,255)"; 
context.fillRect(0, 0, 500, 500); 

     $("a").click(function(event){alert("Thanks for visiting!");}); 
    $("#flip").mousemove(function(event){ 
     var x, y; 


    x = event.layerX; 
    y = event.layerY; 


    //alert("mouse pos"+event.layerX); 
    var flip = document.getElementById('flip'); 
    var context = flip.getContext('2d'); 
context.fillStyle = "rgb(255,0,0)"; 
context.fillRect(x, y, 5, 5); 
    } 
    ); 
    } 
);  
    </script> 
    </head> <body bgcolor="#000000"> <a href="http://jquery.com/">jQuery</a><canvas id="flip" width="500" height="500"> 
    This text is displayed if your browser does not support HTML5 Canvas.</canvas> </body></html>

來源

2011-01-31 Bill Yan

`<！doctype html />`無效並調用怪癖模式，這會改變很多DOM事物的行爲！ `<！doctype html>`是正確的DTD。 – 2011-04-22 12:19:43

enter image description here

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset = "utf-8"> 

     <script> 
      Element.prototype.leftTopScreen = function() { 
       var x = this.offsetLeft; 
       var y = this.offsetTop; 

       var element = this.offsetParent; 

       while (element !== null) { 
        x = parseInt (x) + parseInt (element.offsetLeft); 
        y = parseInt (y) + parseInt (element.offsetTop); 

        element = element.offsetParent; 
       } 

       return new Array (x, y); 
      } 

      document.addEventListener ("DOMContentLoaded", function() { 
       var flip = document.getElementById ("flip"); 

       var xy = flip.leftTopScreen(); 

       var context = flip.getContext ("2d"); 

       context.fillStyle = "rgb(255,255,255)"; 
       context.fillRect (0, 0, 500, 500); 

       flip.addEventListener ("mousemove", function (event) { 
        var x = event.clientX; 
        var y = event.clientY; 

        context.fillStyle = "rgb(255, 0, 0)"; 
        context.fillRect (x - xy[0], y - xy[1], 5, 5); 
       }); 
      });  
     </script> 

     <style> 
      #flip { 
       border: 1px solid black; 
       display: inline-block; 

      } 

      body { 
       text-align: center; 
      } 
     </style> 
    </head> 

    <body> 
     <canvas id = "flip" width = "500" height = "500">This text is displayed if your browser does not support HTML5 Canvas.</canvas> 
    </body> 
</html>

您不必擔心兼容性，只有IE瀏覽器（前9）不支持原生的畫布。

來源

2011-01-31 13:46:21 Caio

這個答案解決了這個問題，但它不明智地擴展了DOM並重新發明了方向盤。 – 2011-02-23 02:03:19

`<！doctype html />`無效並且調用怪癖模式，這會改變很多DOM事物的行爲！ `<！doctype html>`是正確的DTD。 – 2011-04-22 12:20:07

您將需要一個自定義函數來確定元素的位置，然後找出鼠標位於該元素內的位置。 Here is an example。它使用quirks模式和我的JavaScript庫中的這個函數，這不應該很難轉換成jQuery。

function findPos(obj) { 
    var curleft = curtop = 0; 

    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     return [curleft, curtop]; 
    } 
}

編輯

這不會在IE中，由於它不支持pageX屬性工作。您必須通過像this這樣的函數來傳遞事件對象才能解決該問題。但正如2x2p1p所說，canvas不支持任何低於版本9的Internet Explorer。

來源

2011-01-31 16:04:21 Olical

我在這個主題上看到很多問題，並且都提出瀏覽DOM或使用offsetX和offsetY，它們並不總是設置正確。

您應該使用canvas API中的函數：canvas.getBoundingClientRect（）。

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
    } 

    canvas.addEventListener('mousemove', function(evt) { 
    var mousePos = getMousePos(canvas, evt); 
    console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y); 
    }, false);

來源

2013-09-27 10:24:51 AxFab

使用javascript在畫布內獲取鼠標位置

回答

相關問題