2

I am pretty new to HTML5 and was wondering how I would go about adding 10 random Facebook friends profile image's using JavaScript to an HTML5 Canvas, I have searched all over the net and have yet to find a solution that works, below is an example that I have been playing about with, I have created a Facebook App with the required permissions and can get a list of friends and their profile images I just can not figure out how to add them to the HTML5 Canvas.

<script>
  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

  window.onload = function(images) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    var sources = {
      canvasbackground: "prof.jpg",
      userpic1: "https://graph.facebook.com/1645410740/picture",
      userpic2: "https://graph.facebook.com/100000557085310/picture"
    };

        loadImages(sources, function(images) {
        context.drawImage(images.canvasbackground, 0, 0, 422, 464);
        context.drawImage(images.userpic1, 33, 28, 70, 70);
        context.drawImage(images.userpic2, 130, 28, 70, 70);
    });
  };

</script>

Any help would be greatly appreciated.

4

1 回答 1

0

所以，是的，首先我会将 numImages 更改为等于 sources.length，然后对于回调，执行

if( ! -- numImages ){ // once it gets down to 0, it's done, probably want to name it loadingImages
   //done 
}

输入一些控制台日志，看看实际发生了什么。

于 2012-11-14T18:46:18.600 回答