Как очистить/удалить нарисованные изображения с холста

Question

Я показываю некоторые изображения на холсте, используя цикл for в цикле JavaScript. Код работает, но как очистить/удалить предыдущие изображения (те, которые уже были сделаны ранее в цикле) с холста, прежде чем перейти к следующей итерации. Я попытался использовать 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 и холст соответствует вашей canvasupdate (брезентовый элемент)

Answer 2

Что один должен помнить, что все, что нарисовано на холсте в одном цикле довольно много соединены вместе в 1 изображении. Несмотря на то, что мы можем видеть разные объекты, для холста это просто одно большое изображение.

Чтобы решить, что происходит на холсте, вам нужно обработать это в своем коде и никогда не рисовать его в следующем цикле, это не стирание вещей на холсте, а в вашем коде.

Имея ctxupdate.clearRect(0, 0, canvasupdate.width, canvasupdate.height); в начале вашей функции рисования будет убедиться, что холст пуст, прежде чем начать наводить.

Таким образом, в этом случае вам необходимо удалить материал из calloutImageArray массива или сказать код, в каким-то другим способом, который указывает массив, который он должен пропустить, только тогда вы сможете исключить его из раскраски.

Все зависит от того, как вы намерены работать над своим кодом. Что решает, нужно ли удалять изображение или нет?