移除HTML5畫布我已經使用JavaScript已經繪製的圖像到HTML5畫布以下功能已放置有使用javascript

Question

圖像：

function drawStartButton(){ 
      image.onload = function(){ 
       context.drawImage(image, 260.5, 60); 
      }; 
      image.src = "StartButton.png"; 

      var boundingBox = myGameCanvas.getBoundingClientRect(); 

      boundingBox.onmousemove = function(e){ 
       var mouseX = e.pageX - this.offsetLeft; 
       var mouseY = e.pageY - this.offsetTop; 
       var pixels = context.getImageData(mouseX, mouseY, 1, 1); 
      } 
     } 

的圖像將被用作按鈕，點擊後會調用另一個函數。我要的是單擊按鈕時要調用的函數是：

function drawLevelOneElements(){ 
      image.onload = function(){ 
       context.drawImage(image, 50, 30, 20, 20); 


      }; 
      image.src = "1.png"; 
} 

我已經添加了一個事件偵聽器到畫布上，其監聽按鈕點擊，並調用功能，當點擊ocurrs。然而，這個函數目前正常工作，雖然函數drawLevelOneElements（）被調用並繪製到畫布上，但調用drawStartButton（）所繪製的圖像仍然顯示在畫布上，所以我將這兩個函數的內容顯示在畫布在同一時間。

我想要發生的事情是，當按鈕被點擊時，按鈕然後消失，drawLevelOneElements所繪製的元素是在畫布上顯示的內容，而不再有開始按鈕。

有人能告訴我在畫布上繪製drawStartButton（）後，如何從畫布上清除繪製的圖像？

謝謝。

Answer 1

通常，您可以通過設置其寬度或高度值來清除整個畫布。例如，如果要清除畫布的一個區域，可以通過在該區域上繪製fillRect來實現 - 例如，將fillStyle設置爲與畫布的背景顏色相同的顏色。

context.fillStyle = this.fill; 
context.fillRect(x, y, width, height);