使用drawImage（）繪製多個圖像在畫布上的問題

Question

我只是不能得到這個爲我工作。

我試圖使用drawImage（）繪製多個圖像到畫布。我覺得我大大忽視了一些小事。

它應該畫18張牌。它將從左側開始50px，從頂部開始下降，並繪製每張牌100w * 150h。每張卡片圖像之間應該有25px。畫布尺寸設置爲825w * 600h。

試圖用簡單的Javascript（沒有jQuery）完成此操作。任何幫助表示讚賞。

圖像是它如何繪製到我的畫布。

// Draw the cards to the canvas. 
function drawCards() 
{ 
    // Starting positions. 
    var x = 50; 
    var y = 50; 

    // Counter that will hold current card position. 
    var cardCount = 0; 

    var img = new Image(100, 150); 

    // How many rows. 
    for (var row = 0; row < 3; row++) 
    { 
     // How many columns. 
     for (var column = 0; column < 6; column++) 
     { 
      // Store the current card. 
      var card = memoryDeck[cardCount]; 

      // Check if the card is flipped, if it is set an image with url to face card. 
      if (card.flipped == true) 
      { 
       img.onload = function() { 
        ctx.drawImage(this, x, y, 100, 150); 
       } 
       img.src = card.faceImage; 
      } 
      // Otherwise set image url to back of card. 
      else 
      { 
       img.onload = function() { 
        ctx.drawImage(this, x, y, 100, 150); 
       } 
       img.src = card.backImage;   
      } 

      // Increase the x position (the width of a card, plus the space in between), and the current card position being stored. 
      x += 125; 
      cardCount++; 
     } 

     // We are on a new row, reset the column card position and increase the row card position. 
     x = 50; 
     y += 175; 
    } 
} 

Answer 1

JS變量不作用域阻攔，他們的作用域的功能。所以當img.onload訪問x和y時，它們會引用x和y的最終值。 要創建塊範圍變量，請使用let語句或IIFE。

// Draw the cards to the canvas. 
function drawCards() 
{ 
    // Starting positions. 
    var x = 50; 
    var y = 50; 

    // Counter that will hold current card position. 
    var cardCount = 0; 

    var img = new Image(100, 150); 

    // How many rows. 
    for (var row = 0; row < 3; row++) 
    { 
     // How many columns. 
     for (var column = 0; column < 6; column++) 
     { 
      // Store the current card. 
      var card = memoryDeck[cardCount]; 

      // Check if the card is flipped, if it is set an image with url to face card. 
      if (card.flipped == true) 
      { 
       (function(x, y) { 
       img.onload = function() { 
        ctx.drawImage(this, x, y, 100, 150); 
       } 
       img.src = card.faceImage; 
       })(x, y); 
      } 
      // Otherwise set image url to back of card. 
      else 
      { 
       (function(x, y) { 
       img.onload = function() { 
        ctx.drawImage(this, x, y, 100, 150); 
       } 
       img.src = card.backImage; 
       })(x, y);   
      } 

      // Increase the x position (the width of a card, plus the space in between), and the current card position being stored. 
      x += 125; 
      cardCount++; 
    } 

     // We are on a new row, reset the column card position and increase the row card position. 
     x = 50; 
     y += 175; 
    } 

} 

類似簡單的問題是這樣的：

READ THE SOURCE CODE! 
 
<script> 
 
    function demo1() { 
 
    for (var i = 0; i <= 5; i++) { 
 
    setTimeout(function(){alert('i === ' + i)}, i * 200); 
 
    } 
 
    // i === 6 
 
    
 
    
 
    // You expect this to happen: 
 
    // [alerts "i === 1"] 
 
    // [alerts "i === 2"] 
 
    // [alerts "i === 3"] 
 
    // [alerts "i === 4"] 
 
    // [alerts "i === 5"] 
 
    
 
    // What actually happens: 
 
    // [alerts "i === 6"] 
 
    // [alerts "i === 6"] 
 
    // [alerts "i === 6"] 
 
    // [alerts "i === 6"] 
 
    // [alerts "i === 6"] 
 
    // [alerts "i === 6"] 
 
    } 
 
</script> 
 
<button onclick="demo1();">Demo 1 </button> 
 
<script> 
 
    function demo2(){ 
 
    for (var i = 0; i <= 5; i++) { 
 
     // IIFE for the win! 
 
     (function(i) { 
 
     setTimeout(function(){alert('i === ' + i)}, i * 200); 
 
     })(i); 
 
    } 
 
    
 
    // Expected: 
 
    // [alerts "i === 0"] 
 
    // [alerts "i === 1"] 
 
    // [alerts "i === 2"] 
 
    // [alerts "i === 3"] 
 
    // [alerts "i === 4"] 
 
    // [alerts "i === 5"] 
 
    
 
    // Actual: 
 
    // [alerts "i === 0"] 
 
    // [alerts "i === 1"] 
 
    // [alerts "i === 2"] 
 
    // [alerts "i === 3"] 
 
    // [alerts "i === 4"] 
 
    // [alerts "i === 5"] 
 
    } 
 
</script> 
 
<button onclick="demo2();">Demo 2</button>

Answer 2

給出的答案是有問題的，因爲它聲明一個循環內的函數調用。這種聲明模式是危險的，如果你不理解閉包，會導致內存泄漏。用於克服範圍問題的方法也非常低效。由於只有一個圖像正在創建，因此代碼將不起作用，並且每次src被設置時，先前的加載src被取消並且該過程再次開始。

另外，創建匿名函數會使代碼更難調試，因爲任何錯誤都將難以追蹤痕跡，並且分析也很難閱讀。始終命名這些功能，並始終將功能放在其範圍的頂部。

function drawCards(){ 
    // declare all variables and functions 
    var row, column, src, cardIndex, card; 
    function loadThenDisplayImage (src, x, y) { 
     var image; 
     function onImageload() { 
      ctx.drawImage(this, x, y, cardW, cardH); 
     } 
     image = new Image(cardW, cardH); 
     image.src = src; 
     image.onload = onImageLoad; 
    } 
    // define constants and variables. 
    const left = 50; 
    const top = 50; 
    const cardW = 100; 
    const cardH = 150; 
    const xSpacing = 25; 
    const ySpacing = 25; 
    cardIndex= 0; 

    // function logic 
    for (row = 0; row < 3; row += 1) { 
     for (column = 0; column < 6; column += 1) { 
      card = memoryDeck[cardIndex += 1]; 
      scr = card.flipped ? card.faceImage : card.backImage; 
      loadThenDisplayImage( // long function call best split for readbility 
       src, 
       left + (cardW + xSpacing) * column, 
       top + (cardH + ySpacing) * row 
      ); 
     } 
    } 
}