Question

我正在使用一个简单的脚本用鼠标在画布上绘制一条线。当用户在画布中单击并拖动时，它应该在该区域中绘制。该线确实被绘制，但它不跟随鼠标，它似乎不是一个偏移问题。按住按钮的时间越长，线越远离光标。它吸引了比我要求更多的线，我无法弄清楚为什么。例如，如果我从画布的中心开始并向底部移动，则该线将在光标之前很久到达底部。这是我正在使用的代码：

if(window.addEventListener) {
window.addEventListener('load', function () {

  function init () {

    front_canvas = document.getElementById('front_paint_canvas');
    front_context = front_canvas.getContext('2d');

    tool = new tool_pencil();

    front_canvas.addEventListener('mousedown', ev_canvas, false);
    front_canvas.addEventListener('mousemove', ev_canvas, false);
    front_canvas.addEventListener('mouseup',   ev_canvas, false);
  }

  function tool_pencil () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev.clientX - 230, ev.clientY - 280);
        tool.started = true;
    };

    this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev.clientX - 230, ev.clientY - 280);
        context.stroke();
      }
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }

  function ev_canvas (ev) {
      context = ev.target.getContext('2d');

    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

  init();

}, false); }

这怎么可能发生呢？

Answer 1

您的上下文可能与画布的大小不同。要确保两者对齐，请使用此

front_canvas.width = front_canvas.clientWidth;
front_canvas.height = front_canvas.clientHeight;

在您创建上下文之前。

Answer 2

我明白了。我把画布大小放在css中而不是作为元素属性。这导致画布缩放而不是简单地调整大小，这意味着它将线条图绘制为相对坐标而不是绝对坐标。

在画布上跟踪鼠标移动时的奇怪行为

2 个答案: