Question

我正在做一个HTML5画布画家，可以选择绘制，放置矩形，圆圈和不同的颜色选项。我的问题是，我最初有一个默认值为“铅笔”的var工具，我想将此变量更改为“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函数都有效。我也试过（铅= = true＆amp;＆amp; rect == false），也不行。

很抱歉，如果答案很明显，我只是没有看到，这是我第二次使用Javascript进行编程。

提前致谢！

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

变量＆amp;方法名称相同rect＆amp;矩形（）。 JavaScript不支持相同的名称变量和函数，这就是为什么rect变量的值被rect（）函数覆盖并且总是返回true但是你的期望是假的。更改rect的变量或函数名称。

JS Boolean var不影响if语句

2 个答案: