JS Boolean var 不影响 if 语句答案

【问题标题】：JS Boolean var doesn't affect if-statementsJS Boolean var 不影响 if 语句
【发布时间】：2012-12-15 20:16:23
【问题描述】：

我正在做一个 HTML5 画布画家，具有绘制、放置矩形、圆形和不同颜色选项的选项。我的问题是我最初有一个默认值为“铅笔”的 var 工具，我想通过单击将此变量更改为“矩形”（还没有从圆圈开始，因为我想先完成这项工作）在相应的 div 上，这样我就可以有一个用于绘图、矩形或圆形的 if 语句。但这不起作用，我选择了变量，因为我在 onclick 函数中放置了一个警报。之后我尝试使用布尔变量（pencil = true，rect = false，本来是一个“状态”），但这也不起作用。我确实已经写下了 if 语句，所以我现在的结论是，我以某种方式将布尔值作为常量（因为铅笔 = 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)，也没用。

对不起，如果答案是显而易见的，我只是没有看到，这是我第二次用 Javascript 编程。

提前致谢！

【问题讨论】：

标签： javascript html canvas if-statement boolean

【解决方案1】：

您已经编写了代码，就好像鼠标事件处理程序的分配在每次条件发生变化时都会隐式地重新完成。这不是它的工作方式。您应该简单地为绘图控件重新分配处理程序 inside 事件处理程序，因为该代码将在每个“点击”事件上运行。

例如：

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

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

【讨论】：

哇，非常感谢，Pointy。有趣的是，我 100% 确信这样做只会“激活”一次功能之一，因此从不费心去尝试。哦，好吧，希望我以后会记住这一点！
好的，很高兴为您提供帮助！祝你好运！

【解决方案2】：

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

【讨论】：