Javascript使用JCanvaScript在画布中加载图像_Javascript_Arrays_Canvas_Html5 Canvas

Javascript使用JCanvaScript在画布中加载图像

javascript arrays canvas html5-canvas

Javascript使用JCanvaScript在画布中加载图像,javascript,arrays,canvas,html5-canvas,Javascript,Arrays,Canvas,Html5 Canvas,我正在使用JcanvaScript库处理Html5画布，现在我想在画布中加载一些图像，但只有最后一个图像加载成功，除了最后一个图像，我看不到任何其他图像，我不知道我的代码出了什么问题这是密码 <!DOCTYPE HTML> <html> <head> <style> canvas { border: 1px solid #9C9898; } </style>

我正在使用JcanvaScript库处理Html5画布，现在我想在画布中加载一些图像，但只有最后一个图像加载成功，除了最后一个图像，我看不到任何其他图像，我不知道我的代码出了什么问题

这是密码

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      canvas {
           border: 1px solid #9C9898;
       }
    </style>
      <script src="jcanvas/jCanvaScript.1.5.15.js"></script>
      <script>
          var imagesUrl = [];
          var imagesObj = [];
          var canvasWidth = 800;
          var canvasHeight = 600;
          var imagesIdPrefix = 'images_';
          var canvas = "canvas";
          var fps = 60;

          imagesUrl.push('images/image1.jpg');
          imagesUrl.push('images/image2.jpg');
          imagesUrl.push('images/image3.jpg');
          imagesUrl.push('images/image4.jpg');

          function init(){
              for (i = 0; i < imagesUrl.length; i++){
                  var xImage = new Image();
                  xImage.src = imagesUrl[i];
                  xImage.onload = function(){
                      jc.start(canvas, fps);
                      jc.image(xImage, i*10, 0, 200, 200)
                              .id(imagesIdPrefix.toString() + i.toString());
                      jc.start(canvas, fps);
                  }
                  imagesObj.push(xImage);
              }
          }

      </script>
  </head>
  <body onload="init()">
    <canvas id="canvas" width="800px" height="600px"></canvas>
  </body>
</html>


帆布{
边框：1px实心#9C9898；
}
var imagesUrl=[]；
var imagesObj=[]；
var canvasWidth=800；
var canvasHeight=600；
var imagesIdPrefix='images_u2;'；
var canvas=“canvas”；
var fps=60；
imagesUrl.push（'images/image1.jpg'）；
imagesUrl.push（'images/image2.jpg'）；
imagesUrl.push（'images/image3.jpg'）；
imagesUrl.push（'images/image4.jpg'）；
函数init（）{
对于（i=0；i

在遍历图像之前，需要确保图像已加载

通过在

for

循环的

内定义onload
函数，图像可能尚未加载到该点，因此脚本将跳过该点。循环完成后，最后一个图像可能是唯一一个及时加载的图像
我建议在for
循环之外为每个图像添加一个加载程序，当所有图像加载完毕后，继续在数组中循环
加载程序和检查器如下所示：
var loadedImages = [];
var loadedNumber = 3 //the number of images you need loaded    
var imageToBeLoaded = new Image();
imageToBeLoaded.onload = function() {
    loadedImages.push(true);
    checkImages();
}
function checkImages() {
    if (loadedImages.length != loadedNumber) {
        setTimeout(checkImages(),1000);
    } else {
        init(); //your draw function
    }
}

MrOBrian在评论中指出了这个bug：当调用onload回调时，我在循环结束时拥有它的值。这就是为什么您认为只有最后一个图像加载是成功的
标准解决方案是在闭包中填充循环内容，保持i的值：
for (i = 0; i < imagesUrl.length; i++){
     (function(i){
              var xImage = new Image();
              xImage.src = imagesUrl[i];
              xImage.onload = function(){
                  jc.start(canvas, fps);
                  jc.image(xImage, i*10, 0, 200, 200)
                          .id(imagesIdPrefix.toString() + i.toString());
                  jc.start(canvas, fps);
              }
              imagesObj.push(xImage);
       })(i);
   }

图像必须首先提供其src。您可以这样调用函数：
onLoadAll(imagesObj, function(){
     // do something with imagesObj
});

您正在回调函数中使用迭代器变量，因此onload
函数中的i
值将始终相同。而且，您的i
变量是全局变量；你应该在它前面添加var。你的代码还存在另一个问题，所有图像加载正常，但没有顺序。你知道怎么回事吗？加载顺序不一定是初始化顺序，因为它取决于网络。如果你愿意的话，我可以建议你使用一个函数，它只在加载所有图像时才调用你的代码。哇，它工作了，我在onLoadAll回调中添加了所有canvas drow函数，一切都很好。非常感谢不客气。学习一个有用的东西总是一件令人愉快的事：）
onLoadAll(imagesObj, function(){
     // do something with imagesObj
});