JavaScript 行未执行 - 清除 Canvas

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);

这是我的代码。我通过其路径加载图像并开始测试 canvas 如何使用 clearRect() 函数清除。 canvas 不使用此命令清除。但是，如果我在使用 clearRect() 的行之前放置一行警告，则 canvas 将被成功清除。

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);

第二个代码片段有效 - 它在我点击警报 window 后清除 canvas。有谁明白为什么它会这样？

Answer 1

您的代码正在与自己赛跑。 board.onload 将在图像加载时执行。它不会按照代码运行的顺序发生，它是 "asynchronous" 并且计划在稍后（图像加载时）运行。

添加提醒时，您就是在给图像加载时间。警报本身与行为无关，只是延迟。在您的第一个代码块中，您清除了棋盘，然后图像加载将在一段时间后触发，并绘制图像。

为什么要加载图像然后立即清除板？如果你想从一块干净的木板开始，你可以只删除 .onload 功能。

JavaScript 行未执行 - 清除 Canvas

JavaScript line not executing - clearing the Canvas

javascript

html

canvas