PROSAGA码农传奇-html/HTML5-HTML5画布|弹跳球|循环通过图像阵列并在每个球上放置不同的背景图像，居中

<div class =“post-text”itemprop =“text”>
  
    <a href="https://codepen.io/prtjohanson/pen/vPKQBg" rel="nofollow noreferrer">
      https://codepen.io/prtjohanson/pen/vPKQBg
    </A>
  
  
    需要改变什么：
  
   <pre>
 <code>
 for (let i = 0; i < imagesArray.length; i++) {
 console.log(i);

const imageArray = imagesArray[i];

setTimeout(function() {
    var arrayImage = new Image();

arrayImage.onload = function() {
      addBall(arrayImage, stageX / 2, 0);
    };

arrayImage.src = imageArray;
  }, i * 1000);
}

</code>
 </pre>
  
    当setTimeout回调被触发时，你的for循环已经完成并且使用var声明，for循环迭代没有自己的范围，有了let，每个迭代都有自己的范围，就像函数一样。
  
  
    <击>
      如果它必须在没有let或const关键字的浏览器上运行，请告诉我，我也可以为它们提供解决方案
    </击>
  
  
    这将适用于IE11和其他不支持ES6的浏览器
  
   <pre>
 <code>
 for (var i = 0; i < imagesArray.length; i++) {
 (function(imageArray) {

setTimeout(function() {
      var arrayImage = new Image();

arrayImage.onload = function() {
        console.log('Add'+i);
        addBall(arrayImage, stageX / 2, 0);
      };

arrayImage.src = imageArray;
    }, i * 1000);
  })(imagesArray[i]);
}

</code>
 </pre>
  
    要使图像居中，不使它们超出画布边界，请对beginBitmapFill操作使用2D变换：
  
   <pre>
 <code>
 var transform = new createjs.Matrix2D();
transform.appendTransform(-shape.radius, -shape.radius, 1, 1, 0);
shape.graphics.beginBitmapFill(img, "repeat", transform).drawCircle(0, 0, shape.radius);

</code>
 </pre>
  
    至于没有像数组中的URL一样多的球，似乎有时图像源URL提示“我不是机器人”验证码。如果用您控制下的URL-s替换，问题应该消失。
  
</DIV>