如何停止使用 HTML5 Canvas 进行绘制

Question

我正在尝试使用 HTML 5 Canvas 进行类似 Paint 的操作。我必须做两种类型的矩形：填充和不填充。我是这样做的：

  function rectangle(state = false) {
    var first = [];
    var second = [];
    var click = 0;

    canvas.mousedown(function(e) {
      if (status == "rectangle") {
        if (click == 0) {
          first[0] = e.offsetX;
          first[1] = e.offsetY;
          click++;
        } else {
          second[0] = e.offsetX;
          second[1] = e.offsetY;
          if (state) {
            ctx.fillRect(
              first[0],
              first[1],
              second[0] - first[0],
              second[1] - first[1]
            );
          } else {
            ctx = canvas[0].getContext("2d");
            ctx.strokeRect(
              first[0],
              first[1],
              second[0] - first[0],
              second[1] - first[1]
            );
          }
          click = 0;
        }
      }
    });
  }

这是我的电话

//rectangle ;)
$("#fill").click(function() {
  $("#alert").text("fill Rectangle");
  status = "rectangle";
  rectangle(true);
});

$("#contour").click(function() {
  $("#alert").text("Rectangle");
  status = "rectangle";
  rectangle();
});

我有 2 个按钮用于选择用户想要的矩形类型。 当我点击filled 时，我可以像我想要的那样绘制我的矩形，但是当我切换到not filled 时，它仍然通过填充矩形来绘制。要绘制一个未填充的矩形，我必须按 F5 并首先在 not filled 中单击。

Answer 1

您的问题是每次修改填充复选框时都会添加一个新的事件侦听器，但不会删除旧的侦听器。这意味着您正在绘制轮廓矩形和填充矩形。相反，只需添加一个事件侦听器并在其中处理状态。

补充说明：

• 首先，您不必每次点击都重新创建新的上下文。
• 其次，你有很多重复的代码
• 第三，使用{x, y} 代替[x, y] 以方便日后修改。

let shape = 'rectangle'
let fill = false;
let clicks = [], clickCount = 0;

let fillCheck = document.querySelector('input');
fillCheck.addEventListener('input', () => fill = fillCheck.checked);

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext("2d");

canvas.addEventListener('mousedown', e => {
  if (shape == 'rectangle') {
    clicks[clickCount++] = {x: e.offsetX, y: e.offsetY};
    if (clickCount === 2) {
      ctx[fill ? 'fillRect' : 'strokeRect'](
        clicks[0].x,
        clicks[0].y,
        clicks[1].x - clicks[0].x,
        clicks[1].y - clicks[0].y);
      clickCount = 0;
    }
  }
});

canvas {
  outline: 1px solid;
}

<div><label><input type="checkbox">Fill?</label></div>
<canvas width="300" height="300"></canvas>