如何执行一个具有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 Using images

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

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>