JS布尔值var不影响if语句

Question

我正在做一个HTML5画布画家，它具有绘制，放置矩形，圆形和不同颜色选项的选项。 我的问题是，我最初使用的是var工具，其默认值为“ pencil”，并且我想将此变量更改为“ rect”（还没有从圆圈开始，因为我想先完成此工作），然后点击在相应的div上，这样我就可以为图纸，矩形或圆形设置if语句。 但是，这没有用，我将变量单挑出来，因为我收到了警报，并将其放置在onclick函数中。 之后，我尝试使用布尔变量（pencil = true，rect = false，本来是一个“状态”），但这也不起作用。 我确实已经写下了if语句，所以我现在的结论是我以某种方式将布尔值作为常量（因为pencil = true是我的var的默认状态），这似乎不太可能。 更合乎逻辑的解释是，我没有通过div-click正确更改变量的值。

这是我的代码的一部分：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var color = "black";
var drawing = false;
var pencil = true;
var rect = false;



//Pencil
var pencilDiv = document.getElementById("pencil");
pencilDiv.onclick = function () {
  pencil = true;
  rect = false;
}

//Rect
var rectDiv = document.getElementById("rect");
rectDiv.onclick = function () {
  rect = true;
  pencil = false;
}

if (pencil) {
  canvas.onmousedown = function (event) {
    drawing = true;
  }

  canvas.onmousemove = function (event) {
    if (drawing) {
      draw()
    }
  }

  canvas.onmouseup = function (event) {
    drawing = false;
  }
}

if (rect) {
  canvas.onmousedown = function (event) {
    rect()
  }
}

draw和rect函数均起作用。 我也尝试过if（pencil == true && rect == false），也不起作用。

抱歉，答案很明显，我只是看不到，这是我第二次使用Java编程。

提前致谢！

Answer 1

您已经编写了代码，就像每次条件改变时都隐式地重新执行鼠标事件处理程序的分配一样。 那不是它的工作方式。 您应该简单地重新分配用于绘制控件的事件处理程序内部的处理程序，因为该代码将在每个“点击”事件中运行。

例如：

pencilDiv.onclick = function () {
  canvas.onmousedown = function (event) {
    drawing = true;
  }

  canvas.onmousemove = function (event) {
    if (drawing) {
      draw()
    }
  }

  canvas.onmouseup = function (event) {
    drawing = false;
  }
}

rectDiv.onclick = function () {
  canvas.onmousedown = function (event) {
    rect()
  }
  canvas.onmousemove = canvas.onmouseup = null;
}

另外，您可以让鼠标事件处理程序的代码检查标志，从而避免需要在每个控件“ click”事件上重新分配事件处理程序。

Answer 2

变量和方法的名称与rect和rect（）相同。 JavaScript不支持相同的名称变量和函数，这就是rect（）函数覆盖rect变量的值并始终返回true的原因，但您的期望是false。 更改rect的变量或函数名称。