0

HTML5 キャンバスを使用する非常に単純な JavaScript を作成しました。ユーザーがキャンバス上でマウスをクリックすると、スクリプトはマウスの座標を取得し、マウスを押したままマウスを動かすと、マウスを離すまでこれが繰り返されます。しかし、それは機能しません。なぜなのかわかりませんか？よろしくお願いします。

<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>

<script>
// Canvas link
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// Variables
var x1;
var y2;
var isPressed = false;

// Event listeners
context.addEventListener('mousedown', functionMouseDown, false);
context.addEventListener('mousemove', functionMouseMove, false);
context.addEventListener('mouseup', functionMouseUp, false);


function functionMouseDown() {
    // Get coordinates
    x1 = mousePos.x;
    y1 = mousePos.y;

    isPressed = true;
}

function functionMouseMove() {
     // If mouse is down and moved start drawing line
     if (isPressed == true) {
        drawLine();
     }
}

function functionMouseUp() {
    // Stop drawing line
    isPressed = false;
}

function drawLine() {
// Draw line
context.moveTo(x1,y1);
context.lineTo(x,y);
context.stroke();

// Set start coordinates to current coordinates
x1 = x;
y1 = y;
}
</script>
</body>
</html>
4

1 に答える 1

3

ここにはいくつかの問題があります。マウスの位置を取得する必要がありますが、これは単に mousePos.x/y に格納されているわけではありません。mousemove、mousedown、mouseup のリスナーとして追加された関数に最初のパラメーターとして渡されたマウス移動イベントを通過します。これが私がそれを修正した方法です

  function functionMouseDown(e) {
      // Get coordinates
      x1 = e.clientX
      y1 = e.clientY;

      isPressed = true;
  }

  function functionMouseMove(e) {
       // If mouse is down and moved start drawing line
       if (isPressed == true) {
          drawLine(e);
       }
  }

  function functionMouseUp() {
      // Stop drawing line
      isPressed = false;
  }

  function drawLine(e) {
  // Draw line
  var x = e.clientX;
  var y = e.clientY;
  context.moveTo(x1,y1);
  context.lineTo(x,y);
  context.stroke();

  // Set start coordinates to current coordinates
  x1 = x;
  y1 = y;
  }
于 2012-12-02T06:01:41.147 に答える