在画布中使用 javascript 获取鼠标位置答案

【问题标题】：getting mouse position with javascript within canvas在画布中使用 javascript 获取鼠标位置
【发布时间】：2011-06-18 09:53:09
【问题描述】：

我正在学习 jquery 和 html5 画布。我想做的只是一个简单的 html5 绘图示例。当鼠标移动时，我会在鼠标下方绘制红色方块。

我的代码很简单，但是在画布中获取鼠标光标位置时遇到问题。

现在，我正在使用 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>

【问题讨论】：

<!doctype html /> 无效并调用 quirks 模式，这改变了很多 DOM 事物的行为！ <!doctype html> 是正确的 DTD。

标签： javascript html canvas

【解决方案1】：

我看到很多关于这个主题的问题，都建议浏览 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);

【讨论】：

这是一个不错的解决方案，但如果画布带有边框或填充样式，它将无法工作......
getBoundingClientRect() 给出边框矩形，但这是我发现以相同方式处理位置样式和滚动的唯一解决方案。使用此解决方案，您将不得不使用一些丑陋的代码，例如： parseInt(canvas.style.borderLeftWidth.substring(-2) 我的建议：在父 div 上添加填充和边框。

【解决方案2】：

<!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之前）原生不支持canvas。

【讨论】：

这个答案解决了问题，但它不明智地扩展了 DOM 并重新发明了轮子。
<!doctype html /> 无效并调用 quirks 模式，这改变了很多 DOM 事物的行为！ <!doctype html> 是正确的 DTD。
如果窗口没有向上滚动，您的 leftTopOffset 函数会中断。

【解决方案3】：

您将需要一个自定义函数来计算元素的位置，然后计算鼠标在该元素中的位置。 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 所说，任何低于版本 9 的 Internet Explorer 都不支持画布。

【讨论】：