0

我正在做一个 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 进行编程。

提前致谢！

4

2 回答 2

0

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

例如：

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

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

于 2012-12-15T20:21:56.127 回答
0

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

于 2012-12-16T00:33:00.927 回答