如何从画布中清除/删除绘制的图像

Question

我正在使用 JavaScript 中的 for 循环在画布上显示一些图像。代码正在运行，但是在进行下一次迭代之前，如何从画布中清除/删除以前的图像（循环中已经绘制的图像）。我曾尝试使用 clearRect()，但没有奏效。

HTML 代码：

<canvas  id="myCanvas"  height="720" width="1280"   style="border:1px solid #000000;"></canvas>

JavaScript 代码：

var canvasupdate = document.getElementById("myCanvas"); 
ctxupdate = canvasupdate.getContext("2d");

var imageobj = new Array();
for (var d=0;d<calloutImageArray.length;d++)
{
    imageobj[d] = new Image(); 
    (function(d)
     {
          imageobj[d].src = imagePath+"/"+calloutImageArray[d];
          imageobj[d].onload = function()
          {
               ctxupdate.drawImage(imageobj[d], calloutImageArrayX[d], calloutImageArrayY[d],calloutImageArrayW[d], calloutImageArrayH[d]);
          };
     })(d);
}

Answer 1

画布通常类似于绘画空间。因此，您可以使用以下代码清除它。

---

context.clearRect(0, 0, canvas.width, canvas.height);

---

上下文对应于您的 ctxupdate 而canvas对应你的canvasupdate（canvas元素）

Answer 2

必须记住的是，在一个循环中在画布上绘制的所有内容几乎都在一张图像中连接在一起。尽管我们可以发现不同的对象，但对于画布来说，它只是一张大图。

为了决定画布上的内容，您需要在代码中处理它，并且永远不要在下一个循环中绘制它，这不是擦除画布上的内容，而是在您的代码中。

在您的绘图功能开始时使用ctxupdate.clearRect(0, 0, canvasupdate.width, canvasupdate.height); 将确保在您开始放入之前画布是空的。

因此，在这种情况下，您需要从calloutImageArray 数组中删除内容，或者以其他方式告诉代码它应该跳过数组的哪些索引，只有这样您才能将其排除在绘制之外。

这完全取决于您希望代码如何工作。是什么决定了是否应该删除图像？