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

コンテキストはおそらくキャンバスと同じサイズではありません。両方が整列していることを確認するには、これを使用します

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

コンテキストを作成する直前。

于 2013-08-24T12:02:15.017 に答える