Javascript JS布尔变量不'；不影响if语句

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

以下是我的代码部分：

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）也不起作用

很抱歉，如果答案很明显，但我看不到，这是我第二次用Javascript编程

---

提前谢谢

您编写的代码就像每次条件更改时都隐式地重新分配鼠标事件处理程序一样。这不是它的工作方式。您只需在事件处理程序中为绘图控件重新分配处理程序，因为该代码将在每个“单击”事件上运行

例如：

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

---

或者，您可以让鼠标事件处理程序的代码检查标志，从而避免在每个控件“单击”事件上重新分配事件处理程序。

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

哇，非常感谢，Pointy。有趣的是，我100%确信这样做只会“激活”其中一个功能一次，因此从来没有尝试过。哦，好吧，希望我将来会记住这一点！好的，很乐意帮忙！祝你好运