如何使用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 
}

放置一些控制台日志，看看實際發生了什么。