0

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

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); }

这怎么可能发生？

4

2 回答 2

0

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

于 2013-08-30T07:07:50.990 回答
0

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

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

就在你创建上下文之前。

于 2013-08-24T12:02:15.017 回答