如何在另一個內部具有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>