如何使用JavaScript将Facebook朋友个人资料图片添加到HTML5 Canvas

Question

我是HTML5的新手，我想知道如何将10个使用JavaScript的随机Facebook朋友个人资料图像添加到HTML5 Canvas中，我在网上进行了搜索，但仍未找到可行的解决方案，下面是一个示例我一直在玩，我已经创建了一个具有必需权限的Facebook应用，并且可以获取朋友列表和他们的个人资料图片，只是我不知道如何将他们添加到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>

任何帮助将不胜感激。

Answer 1

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

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

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