在一個畫布上繪制多個圖像

Question

我有一個數組，其中包含有關如何繪制image所有信息。 我想繪制2 images ，當我這樣做時，它只繪制最后一張圖像。 我能做什么？

for(i = 0; i < tiles.length; i++)
{
    var sourceX = tiles[i][5];
    var sourceY = tiles[i][6];
    var sourceWidth = tiles[i][9];
    var sourceHeight = tiles[i][10];
    var destWidth = sourceWidth;
    var destHeight = sourceHeight;
    var destX = tiles[i][7];
    var destY = tiles[i][8];

    var imageObj = new Image();
    imageObj.onload = function()
    {
        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
    };
    imageObj.src = tiles[i][4];
}

Answer 1

我無法解釋更具體的原因，但這是我想出的解決方案。 這個對我有用。

 const getContext = () => document.getElementById('my-canvas').getContext('2d'); // It's better to use async image loading. const loadImage = url => { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = () => reject(new Error(`load ${url} fail`)); img.src = url; }); }; // Here, I created a function to draw image. const depict = options => { const ctx = getContext(); // And this is the key to this solution // Always remember to make a copy of original object, then it just works :) const myOptions = Object.assign({}, options); return loadImage(myOptions.uri).then(img => { ctx.drawImage(img, myOptions.x, myOptions.y, myOptions.sw, myOptions.sh); }); }; const imgs = [ { uri: 'http://placehold.it/50x50/f00/000?text=R', x: 15, y: 15, sw: 50, sh: 50 }, { uri: 'http://placehold.it/50x50/ff0/000?text=Y', x: 15, y: 80, sw: 50, sh: 50 }, { uri: 'http://placehold.it/50x50/0f0/000?text=G', x: 15, y: 145, sw: 50, sh: 50 } ]; imgs.forEach(depict); 

 #my-canvas { background: #7F7F7F; } 

 <canvas id="my-canvas" width="80" height="210"></canvas> 

Answer 2

我不是肯定的，但是imageObj可能不是你在imageObj.onload函數中所期望的imageObj。 而不是做

 context.drawImage(imageObj, sourceX, sourceY,

看看你做了什么

 context.drawImage(this, sourceX, sourceY,

Answer 3

我有類似的問題，我喜歡解決方案

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

只需調用window.requestAnimationFrame（draw）; 從你的繪圖功能，它將運行一個無限循環，並在它們准備好后立即繪制你的圖像

Answer 4

如果您要加載多個圖像，建議您先預先加載所有圖像。 瀏覽此處獲取更多信息：

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

Answer 5

這是一個解決方案，也是推薦的替代方案; 都使用<function>.bind(<this>[,<arg1>][,<arg2>])

bind包裝預期的函數，並使用其他指定的參數（args）對其執行調用。 bind的第一個參數是函數的this實例。 將其設置為undefined將傳遞原始this實例。

匿名功能。

  var settings;

  for(i = 0; i < tiles.length; i++)
  {
      settings = {};
      settings.sourceX = tiles[i][5];
      settings.sourceY = tiles[i][6];
      settings.sourceWidth = tiles[i][9];
      settings.sourceHeight = tiles[i][10];
      settings.destWidth = sourceWidth;
      settings.destHeight = sourceHeight;
      settings.destX = tiles[i][7];
      settings.destY = tiles[i][8];

      settings.imageObj = new Image();
      settings.imageObj.onload = function(args)
      {
         context.drawImage(args.image, args.sourceX, args.sourceY, args.sourceWidth, args.sourceHeight, args.destX, args.destY, args.destWidth, args.destHeight);
      }.bind(undefined, settings);
      settings.imageObj.src = tiles[i][4];
  }

---

我不喜歡使用 匿名函數來處理常見事件; 相反，我會聲明一個對象來存儲處理程序。

這樣您就可以在運行時替換處理程序。 以下面的方式。

聲明對象以存儲事件處理函數

  var Handlers = { 
      "drawImageHandler" : function drawImageHandler(args)
      {
          context.drawImage(args.image, args.sourceX, args.sourceY, args.sourceWidth, args.sourceHeight, args.destX, args.destY, args.destWidth, args.destHeight);
      }
  };

  function DebugInit() 
  {
      var func = Handlers.drawImageHandler;
      Handlers.drawImageHandler = function(func, args) {
         console.log("%o", args);
         func(args);
      }.bind(undefined, func);
  }


  var settings = {};
  DebugInit(); // when called, encapsulates Handlers.drawImageHandler;

  for(i = 0; i < tiles.length; i++)
  {
      settings = {};
      settings.sourceX = tiles[i][5];
      settings.sourceY = tiles[i][6];
      settings.sourceWidth = tiles[i][9];
      settings.sourceHeight = tiles[i][10];
      settings.destWidth = sourceWidth;
      settings.destHeight = sourceHeight;
      settings.destX = tiles[i][7];
      settings.destY = tiles[i][8];
      settings.imageObj = new Image();
      settings.imageObj.onload = Handlers.drawImageHandler.bind(undefined, settings);      
      settings.imageObj.src = tiles[i][4];
  }

jsFiddle ： 示例小提琴

Answer 6

img[0]=new Image();
img[0].src="imgimg/img"+i+".png";
img[0].onload=function(){
  cntxt.drawImage(this,400,i*100,100,100);
  i++;
  img[i]=new Image(); 
  img[i].src="invimg/img"+i+".png";
  img[i].onload=this.onload;
};

我的js游戲，我希望它有助於歡呼！