如何在画布上绘制多个半透明矩形？

Question

如何在画布上绘制多个半透明矩形？

3

我在画布上有一张图片，我想在上面画半透明的矩形。我通过用一个手指拖动和放下来逐步地绘制它们。

目前我的代码看起来像这样：

...

function handleTouch(event) {
    if (event.targetTouches.length === 1) {
      touch = event.targetTouches[0];

      if (event.type == 'touchmove') {
        if (drag) {
          rect.w = touch.pageX - rect.startX;
          rect.h = touch.pageY - rect.startY ;
          draw();
        }
      } else {
        rect.startX = touch.pageX;
        rect.startY = touch.pageY;
        drag = true;
      }
    }
}

function handleEnd(event) {
    drag = false;
}

function draw() {
    drawImageOnCanvas();
    ctx.strokeStyle = "green";
    ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    ctx.fillStyle = 'rgba(0, 100, 255, 0.1)';
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}

function drawImageOnCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imgObj, 0, 0);
}

目前它一次只能处理一个矩形，看起来很符合我的要求，但是我想要更多。我该如何处理？

- Cassidy

由于我使用了clearRect，所以不能只是这样做（而且我必须使用clearRect因为这是半透明矩形）。 - Cassidy

@CassidyWilliams，我不明白为什么你必须要用 clearRect 如果它是半透明的。你可以通过strokeRect和fillRect另一个矩形而无需使用 clearRect. 你能详细说明一下你的具体用例并可能发布一个 JSFiddle 吗？ - Sebastian Simon

1

啊，对不起 @Xufox，我刚刚更新了描述。这是因为我正在使用触摸逐步绘制矩形。 - Cassidy

1

@CassidyWilliams 哦，现在我明白了！好问题！不过你应该在实际问题中明确包含从评论中逐步绘制矩形的事实。 - Sebastian Simon

1

卡西迪·威廉姆斯？我从来没想到！ - duhaime

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robin Joseph · Accepted Answer

是否可以只保留一个矩形的数组，并在每次需要重绘时对其进行迭代？

...
var rects = [];

function handleTouch(event) {
    if (event.targetTouches.length === 1) {
      touch = event.targetTouches[0];

      if (event.type == 'touchmove') {
        if (drag) {
          rects[rects.length-1].w = touch.pageX - rect.startX;
          rects[rects.length-1].h = touch.pageY - rect.startY ;
          draw();
        }
      } else {
        rects.push({
          startX: 0,
          startY: 0,
          w: 0,
          h: 0
        });
        rects[rects.length-1].startX = touch.pageX;
        rects[rects.length-1].startY = touch.pageY;
        drag = true;
      }
    }
}

function handleEnd(event) {
    drag = false;
}

function draw() {
    drawImageOnCanvas();
    for (var i in rects) {
      var rect = rects[i];
      ctx.strokeStyle = "green";
      ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
      ctx.fillStyle = 'rgba(0, 100, 255, 0.1)';
      ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
    }
}

function drawImageOnCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imgObj, 0, 0);
}