javascript - layerX/layerY值不正确？

我正在尝试将功能实现为带画布的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中的位置，看起来还可以：画布位于div元素内部，并且两者的定义宽度均为100％，而图形结束于元素的约50％。它也可以手动设置值，以便在画布元素的右侧也绘制线条。
有谁知道出什么问题了吗？

最佳答案

当鼠标指针到达该元素的一半时，该行不再前进。


发生这种情况的原因可能很多。错误翻译的上下文（来自旋转/平移/缩放）和画布大小不匹配（您在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
}