为什么控制台不记录变量值？

Question

我正在尝试制作一个简单的 JS canvas 画线程序。当有人第一次点击 canvas 时，它应该存储它的 x 和 y 值（变量 x2 和 y2）。当有人第二次点击 canvas 时，它应该将这次点击的 x 和 y 值存储在另一个变量（变量 x1 和 y1）中。我的问题是该程序仅存储第二次单击的值，并且控制台将变量记录为 "undefined".

所以综上所述，当有人点击时，x2和y2的值是"undefined"，而它们应该是一个数字。主要目标是获取 2 个 x 和 y 值并与它们对齐。希望有人能帮忙。

这是我试过的代码：

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas><br>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");




    var a = true;

    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();
      let x2;
      let y2;
      let x1;
      let y1;
      if (a) {
        let x2 = event.clientX - rect.left;
        let y2 = event.clientY - rect.top;
        a = false;
      } else {
        let x1 = event.clientX - rect.left;
        let y1 = event.clientY - rect.top;
        a = true;
        ctx.beginPath();



        ctx.moveTo(x2, y2);
        ctx.lineTo(x1, y1);

        ctx.stroke();
        ctx.closePath();
        console.log("Coordinate x1: " + x1,
          "Coordinate y1: " + y1);
        console.log("Coordinate x2: " + x2,
          "Coordinate y2: " + y2);

      }


    }

    let canvasElem = document.querySelector("canvas");

    canvasElem.addEventListener("mousedown", function(e) {
      getMousePosition(canvasElem, e);
    });
  </script>






</body>

</html>

-JSman225

Answer 1

问题是您在多个地方定义了变量。为了稍后访问它们，您需要将它们存储在主脚本范围内，而不是像 a 变量那样存储在函数内。

看看这个。

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas><br>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var x2, y2, x1, y1;


    var a = true;

    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();

      if (a) {
        x2 = event.clientX - rect.left;
        y2 = event.clientY - rect.top;
        a = false;
      } else {
        x1 = event.clientX - rect.left;
        y1 = event.clientY - rect.top;
        a = true;
        ctx.beginPath();



        ctx.moveTo(x2, y2);
        ctx.lineTo(x1, y1);

        ctx.stroke();
        ctx.closePath();
        console.log("Coordinate x1: " + x1,
          "Coordinate y1: " + y1);
        console.log("Coordinate x2: " + x2,
          "Coordinate y2: " + y2);

      }


    }

    let canvasElem = document.querySelector("canvas");

    canvasElem.addEventListener("mousedown", function(e) {
      getMousePosition(canvasElem, e);
    });
  </script>






</body>

</html>

Answer 2

您也在重新初始化事件侦听器中的变量。这就是为什么它在每个事件调用中都未定义的原因

以下是您可以使用的更新代码


<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas><br>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");



    let x2;
    let y2;
    let x1;
    let y1;
    var a = true;

    function getMousePosition(canvas, event) {
      let rect = canvas.getBoundingClientRect();
      if (a) {
        x2 = event.clientX - rect.left;
        y2 = event.clientY - rect.top;
        a = false;
      } else {
        x1 = event.clientX - rect.left;
        y1 = event.clientY - rect.top;
        a = true;
        ctx.beginPath();



        ctx.moveTo(x2, y2);
        ctx.lineTo(x1, y1);

        ctx.stroke();
        ctx.closePath();
        console.log("Coordinate x1: " + x1,
          "Coordinate y1: " + y1);
        console.log("Coordinate x2: " + x2,
          "Coordinate y2: " + y2);

      }


    }

    let canvasElem = document.querySelector("canvas");

    canvasElem.addEventListener("mousedown", function(e) {
      getMousePosition(canvasElem, e);
    });
  </script>






</body>

</html>

为什么控制台不记录变量值？

Why console not logging variable value?

javascript

console

scope

canvas