Javascript 如何在一个函数之后执行另一个具有onload函数的函数？ 我想在画布上显示一个图像，然后重置它 drawImage（）是在加载图像源后在画布上绘制图像的函数

resetCanvas（）是重置/清理画布的函数

var canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");

drawImage("img/earth.jpg");
resetCanvas();
//more code

function resetCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawImage(source) {
    var img = new Image();
    img.onload = function() {
        var x = img.width;
        var y = img.height;
        adjustCanvasSize(x, y);
        ctx.drawImage(img,0,0, x, y);
    }
    img.src = source;
}

执行此代码时，resetCanvas（）被“忽略”。我不想在drawImage（）的onload函数中插入resetCanvas（），因为它实际上表示在drawImage（）之后将要执行的许多其他不同的函数和指令，这看起来是错误的

我在想，是否有办法让javascript更有耐心，并在图像加载到drawImage函数之前阻止它执行任何操作。

一些评论：

如果在绘制图像后重置画布，您将看不到图像，因为

resetCanvas

函数正在删除以前在画布上绘制的所有内容

在画布中处理图像时存在一些问题。请阅读本文：

接下来是我的代码。我希望有帮助

var canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
重置画布（）；
drawImage（“https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg");
//更多代码
函数resetCanvas（）{
clearRect（0，0，canvas.width，canvas.height）；
}
函数drawImage（源）{
var img=新图像（）；
img.onload=函数（）{
var x=img.宽度；
var y=img.高度；
调整画布大小（画布，x，y）；
ctx.drawImage（img，0,0，x，y）；
}
img.src=源；
}
功能调整画布大小（画布，x，y）{
canvas.width=x；
canvas.height=y；
}

canvas{border:1px solid；}

---

这看起来是错误的。

事实上，这听起来像是一个完美的解决方案，我觉得很好。如果您有许多图像需要在重置前首先加载，则使用Promises和

Promise。所有的
都可以有一个变量布尔值，称为：var imageload=false；然后当加载图像时，将其设置为true，但是由于图像加载发生在另一个线程上，因此您可以处于while循环中，该循环不断地检查se imageLoaded是否为true，并且在这之前不会继续。我的解决方案可能不太理想，但它是实现您想要的结果的一种方法