javascript鼠标坐标与画布和css答案

【问题标题】：javascript mouse coordinates with canvas and cssjavascript鼠标坐标与画布和css
【发布时间】：2012-10-01 04:25:22
【问题描述】：

现在我正在尝试学习如何在 html 上使用 canvas 标签，当我将 css 应用于文档时，我无法处理鼠标事件。

当我移动包含画布的 div 并将其在页面上居中时，问题就开始了，画布的第一个位置不会是 0，因为它居中并且由于某种原因 0,0 将是屏幕的开头而不是画布的开头，我觉得很奇怪，因为我直接将事件监听器添加到画布。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>

<style type="text/css">
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
#divId {
    width: 800px;
    height: 600px;
    text-align:center;
    margin: 20px auto;
    background-color:#0099FF;
}
</style>

<script>
window.onload = function () {

    var canvas = document.getElementById('canvasId');   
    var c = canvas.getContext('2d');
    alert("lol");
    canvas.addEventListener('mousedown', hmd, false);

    function hmd(e) {
        alert ("x: " + e.clientX + "     y: " + e.clientY); 
    }

}
</script>
</head>

<body>

<div id="divId">

<canvas height="300" width="800" id="canvasId" />

</div>

</body>
</html>

所以我在某处读到问题是由 div 引起的，但是当我尝试将 css 直接提供给画布标签时它不起作用，所以基本上我需要做的是让画布居中或放置在任何地方屏幕，但其第一个像素为 0,0。添加解决方案会很困难，因为它会自动居中，所以我需要知道用户分辨率才能计算偏移量，所以我正在寻找一种简单地使用 css 或其他东西来完成它的方法。

【问题讨论】：

专业提示：使用console.log() 代替alert() 进行调试。 :)
我试试看谢谢 :D
Protip #2：新代码应该使用 strict 文档类型而不是过渡文档。虽然在这种情况下并不重要，但由于旧版本的 IE 不支持画布，因此已知 IE 在 Quirks Mode. 中的行为完全不同
感谢 jeremy j starner，我实际上知道这一点，只是在我制作此示例代码以显示我的问题时忘记了它。

标签： javascript html css canvas

【解决方案1】：

要获得相对于canvas 的坐标，请执行以下操作：

function hmd(e) {
    var rx = e.pageX, ry = e.pageY;
    rx -= canvas.offsetLeft;
    ry -= canvas.offsetTop;
    alert ("x: " + rx + "     y: " + ry); 
}

这假设您的 canvas 变量定义是全局的。

编辑：另一种方法：

function hmd(e) {
    var rx, ry;
    if(e.offsetX) {
        rx = e.offsetX;
        ry = e.offsetY;
    }
    else if(e.layerX) {
        rx = e.layerX;
        ry = e.layerY;
    }
}

【讨论】：

【解决方案2】：

这是我在最近的实验中一直使用的。它适用于几乎所有东西：边框、填充、位置：偏移 HTML 元素的固定元素等。它也适用于所有触摸设备，即使浏览器被缩放。

http://jsfiddle.net/simonsarris/te8GQ/5/

var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(can, undefined)['paddingLeft'], 10) || 0;
var stylePaddingTop = parseInt(document.defaultView.getComputedStyle(can, undefined)['paddingTop'], 10) || 0;
var styleBorderLeft = parseInt(document.defaultView.getComputedStyle(can, undefined)['borderLeftWidth'], 10) || 0;
var styleBorderTop = parseInt(document.defaultView.getComputedStyle(can, undefined)['borderTopWidth'], 10) || 0;
var html = document.body.parentNode;
var htmlTop = html.offsetTop;
var htmlLeft = html.offsetLeft;

function getMouse(e) {
    var element = can,
        offsetX = 0,
        offsetY = 0,
        mx, my;

    // Compute the total offset
    if (element.offsetParent !== undefined) {
        do {
            offsetX += element.offsetLeft;
            offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
    }

    // Add padding and border style widths to offset
    // Also add the <html> offsets in case there's a position:fixed bar
    offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
    offsetY += stylePaddingTop + styleBorderTop + htmlTop;

    mx = e.pageX - offsetX;
    my = e.pageY - offsetY;

    // We return a simple javascript object (a hash) with x and y defined
    return {
        x: mx,
        y: my
    };
}

【讨论】：

我必须仔细阅读这段代码才能理解并实际使用它，非常感谢。