Javascript 在for循环中将变量传递给onload函数

我有以下简单的JavaScript加载一组图像并将它们放在HTML画布上（canvasCTX是2D画布上下文）：

for（var i=0；i使用闭包

for (var i=0 ;i < 10; i++) {   
    (function(x){
        var placementX = x*25;
        var imageObj = new Image();
        imageObj.src = 'assets/png/' + x + '.png';
        imageObj.onload = function() {
        canvasCtx.drawImage(imageObj,placementX,0);
        };
    })(i);

}

（变量i=0；i<10；i++）的

（功能（x）{
var placementX=x*25；
var imageObj=新图像（）；
imageObj.src='assets/png/'+x+'.png'；
imageObj.onload=函数（）{
canvasCtx.drawImage（imageObj，placementX，0）；
};
})（i） )；
}
var i=0
函数更新_image（）
{如果（i请尝试此代码

function draw(placementX , imagePath)
{

  var image = document.createElement("img");
  image.src=imagePath;        
  console.log(placementX , "before loading");//to ensure that x befor image loading is the same after loading

  image.onload=(function()
  { 
                canvas.drawImage(image , placementX  , 0);
                console.log(placementX , " after loading");//to ensure that x befor image loading is the same after loading

  });
}

var placementX =0;

for (var i=0 ;i<10; i++) 
{   
     placementX = i*25;
     draw('assets/png/' + i + '.png' , placementX );

}

函数绘图（placementX，imagePath）
{
var image=document.createElement（“img”）；
src=imagePath；
console.log（placementX，“加载前”）；//确保加载图像前的x与加载后的x相同
image.onload=（函数（）
{ 
canvas.drawImage（image，placementX，0）；
console.log（placementX，“加载后”）；//确保加载图像前的x在加载后相同
});
}
var placementX=0；
对于（var i=0；出于某种原因，我无法使此方法工作，尽管我确实找到了一个解决方案，将onload放在一个单独的函数中，并在for循环中调用它，同时将相关变量发送给它。我想知道此方法是否尝试实现相同的目标。此建议的方法可以工作，但效率不如de在循环外部细化单个函数，并根据需要从内部调用它。
    var i=0
    function update_image()
    { if(i<10)
    {   
          var placementX = i*25;
          var imageObj = new Image();
          imageObj.src = 'assets/png/' + i + '.png';
          imageObj.onload = function() {
            canvasCtx.drawImage(imageObj,placementX,0);
           i++;
    update_image();
          }
        }
update_image();

function draw(placementX , imagePath)
{

  var image = document.createElement("img");
  image.src=imagePath;        
  console.log(placementX , "before loading");//to ensure that x befor image loading is the same after loading

  image.onload=(function()
  { 
                canvas.drawImage(image , placementX  , 0);
                console.log(placementX , " after loading");//to ensure that x befor image loading is the same after loading

  });
}

var placementX =0;

for (var i=0 ;i<10; i++) 
{   
     placementX = i*25;
     draw('assets/png/' + i + '.png' , placementX );

}