JavaScript行未執行-清除畫布

Question

var imageCanvas = document.getElementById("imageCanvas");
var imageContext = imageCanvas.getContext("2d");
var board = new Image();
board.onload = function() {
    imageContext.drawImage(board, 0, 0, 400, 400);
};
board.src = "image/board.png";

imageContext.clearRect(0, 0, imageCanvas.width, imageCanvas.height);

這是我的代碼。 我按其路徑加載圖像，並開始測試用clearRect（）函數清除畫布的方式。 此命令無法清除畫布。 但是，如果我要在使用clearRect（）的行之前放置一條警報行，則將成功清除畫布。

var imageCanvas = document.getElementById("imageCanvas");
var imageContext = imageCanvas.getContext("2d");
var board = new Image();
board.onload = function() {
    imageContext.drawImage(board, 0, 0, 400, 400);
};
board.src = "image/board.png";

alert(imageCanvas.width + " " + imageCanvas.height);
imageContext.clearRect(0, 0, imageCanvas.width, imageCanvas.height);

代碼的第二個片段有效-在警報窗口中單擊“確定”后，它將清除畫布。 有誰知道為什么會這樣呢？

Answer 1

您的代碼正在與自己競爭。 加載圖像時將執行board.onload 。 它不會按照代碼運行的順序發生，而是“異步的”，並計划在以后的某個時間（在加載圖像時）運行。

添加警報時，您需要花費一些時間來加載圖像。 警報本身與行為無關，只是一個延遲。 在您的第一個代碼塊中，清除木板，然后一段時間后將觸發圖像加載並繪制圖像。

為什么要加載圖像然后立即清除木板？ 如果要以透明板開始，可以僅刪除.onload函數。