如何在一个又一个包含 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((被"忽略"。我不想在drawImage((的onload函数中插入resetCanvas((，因为它实际上代表了许多其他不同的函数和指令，这些函数和指令将在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>