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。它不会按照代码运行的顺序发生，它是＆＃34;异步的＆＃34;它计划在以后运行（图像加载时）。

添加提醒时，您需要花时间加载图片。警报本身与行为无关，只是延迟。在你的第一个代码块中，你清除了电路板，然后图像加载会在一段时间后被触发，并绘制图像。

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

JavaScript行未执行 - 清除Canvas

1 个答案: