javascript - LayerX/layerY 值不正确？

Question

我正在尝试使用 Canvas 实现一个功能，作为 Firefox 插件的一部分，让用户能够进行绘图。

function draw(event,context,drawit) {
var drawx = event.layerX;
var drawy = event.layerY;

if (!drawit) {
        context.beginPath();
        context.strokeStyle='rgb(0,255,0)';
        context.lineWidth=1;
        context.moveTo(drawx,drawy);
        drawit = true;
} else {
        context.lineTo(drawx,drawy);
        context.stroke();
}   

};

这可行，但是layerX/layerY的结果和绘制的线之间似乎存在差异。只能在 Canvas 元素的左上部分进行绘制。当鼠标指针到达元素的大约一半时，该线不再继续移动。

我已经检查了 Firebug 中元素的位置，看起来没问题: Canvas 位于 div 元素内，并且两者的定义宽度均为 100%，而绘图在元素的大约 50% 处结束。它还可以手动设置值，以便在 Canvas 元素的右侧部分绘制线条。有谁知道出了什么问题吗？

Answer 1

When the mouse pointer reaches about the half of the element the line doesn't go further.

发生这种情况的原因有很多。错误翻译的上下文(来自旋转/平移/缩放)和不匹配的 Canvas 大小(您在 html 中编写的内容以及您在代码中考虑的内容)。

您确定 LayerX 和 LayerY 为您提供了正确的鼠标坐标吗？ Layerx/y 和绘制内容之间的“差异”到底是什么意思？有偏移吗？我问是因为我的鼠标代码有点复杂:

// Sets mx,my to the mouse position relative to the canvas
// unfortunately this can be tricky, we have to worry about padding and borders
function getMouse(e) {
      var element = canvas, offsetX = 0, offsetY = 0;

      if (element.offsetParent) {
        do {
          offsetX += element.offsetLeft;
          offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
      }

      // Add padding and border style widths to offset
      offsetX += stylePaddingLeft;
      offsetY += stylePaddingTop;

      offsetX += styleBorderLeft;
      offsetY += styleBorderTop;

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