javascript - 如何清除/删除 Canvas 上绘制的图像

我正在使用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);
}

最佳答案

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




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




上下文对应于您的ctxupdate
并且canvas对应于您的canvasupdate（canvas元素）