如何在另一个具有 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

几个cmets：

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

2. 在画布中处理图像时存在一些问题。请阅读这篇文章：MDM Using images

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

var canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");
resetCanvas();
drawImage("https://cdn.sstatic.net/Sites/*/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>