使用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在画布内获取鼠标位置

回答

相关问题