Question

首先，我为再次提出另一个问题而道歉。我看到stackoverflow上有很多相关的问题，但我仍然无法解决我的问题。

当我绘制到画布（参见下面的代码）时，它不会在鼠标光标下绘制。它向右和向下偏移。我期待它开始在鼠标光标下绘图。

我是否需要使用以下任何属性：Canvas offset？事件偏移？ ClientX？ LayerX？ OffsetLeft？的offsetTop？

move: function(event) {
  this.prevX = this.currX;
  this.prevY = this.currY;

  this.currX = event.clientX;
  this.currY = event.clientY;

  if (this.drawing) {
    this.ctx.lineTo(this.currX, this.currY);
    this.ctx.stroke();
  }
}

有人可以更正下面的jsfiddle中的错误并解释它为什么会这样运作吗？

https://jsfiddle.net/f9trjzk5/4/

JavaScript使用vue.js.这就是我现在所学的东西。如果你不熟悉它，只是假装它不在那里。您将看到您可以访问画布和上下文变量 - this.canvas，this.ctx。

非常感谢！

UPDATE 该线条的绘制速度明显快于鼠标移动....

已解决需要使用高度和宽度属性替换样式高度和宽度属性 style="height: 500px" width: 500px" - ＆gt; height="500" width="500 引用我在vuejs论坛上给出的有用答案：

这样做是将画布从其原始（默认）大小缩放到与您指定的宽度/高度相匹配（如调整图像大小，它会变形）。这是同样的问题。这就是为什么当鼠标向右移动时，它会越来越远离它的复合效果。

https://forum.vuejs.org/t/canvas-drawing-wonky-under-vue-js-offset-all-weird/9028

带有画布的javascript绘图偏移

0 个答案: