如何使用JavaScript将Facebook好友个人资料图片添加到HTML5画布

Question

我是HTML5的新手，想知道如何使用JavaScript将10个随机的Facebook朋友个人资料图像添加到HTML5画布中，我已经搜索了整个网络，但还没有找到一个有效的解决方案，下面是我一直在玩的一个例子，我创建了一个具有所需权限的Facebook应用程序，可以获取朋友及其个人资料图像的列表我只是不知道如何将它们添加到HTML5画布中。

<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 
}

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