如何在另一个内部具有onload函数的函数执行？

Question

• 我想在画布上（通常） 显示图像 ，然后重设它。
• 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（）被“忽略”。 我不想插入resetCanvas（）的调用drawImage（）的onload函数内，因为它实际上代表了很多其他不同的功能，并且会在的drawImage（后要执行的指令），它看起来是错误的。

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

Answer 1

一些评论：

1. 如果在绘制图像后重置画布，则不会看到该图像，因为resetCanvas函数将删除您先前在画布上绘制的所有内容

2. 使用画布中的图像时存在一些问题。 请阅读本文： MDM使用图像

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

 var canvas = document.getElementById("Canvas"); const ctx = canvas.getContext("2d"); resetCanvas(); drawImage("https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg"); //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(canvas,x, y); ctx.drawImage(img,0,0, x, y); } img.src = source; } function adjustCanvasSize(canvas, x, y){ canvas.width = x; canvas.height = y; } 

 canvas{border:1px solid;} 

 <canvas id="Canvas"></canvas>