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

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

context.clearRect（0,0，canvas.width，canvas.height）;

其中context对应于ctxupdate 和canvas对应于你的canvasupdate（画布元素）

Answer 2

需要记住的是，在一个循环中在画布上绘制的所有内容在1个图像中几乎连接在一起。即使我们可以发现不同的对象，对于画布来说，它只是一个大图像。

为了决定画布上的内容，你需要在代码中处理它，而不是在下一个循环中绘制它，它不是在画布上删除内容而是在代码中删除。

在绘图功能开始时设置ctxupdate.clearRect(0, 0, canvasupdate.width, canvasupdate.height);将确保在开始放入内容之前画布为空。

所以在这种情况下，你需要从calloutImageArray数组中删除东西，或者以其他方式告诉代码它应该跳过哪个数组的指示，然后你才能将它排除在外绘。

这完全取决于您打算如何使用代码。是什么决定是否应该删除图像？

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

2 个答案: