使用drawImage（）在画布上绘制多个图像 [英] Issue drawing multiple Images on Canvas with drawImage()

问题描述

我无法让这个为我工作。

I just cannot get this to work for me.

我正在尝试使用drawImage（）将多个图像绘制到画布上。我觉得我大肆忽视一些东西。

I'm trying to use drawImage() to draw multiple images to a canvas. I feel like I'm massively overlooking something little.

它应该在画布上绘制18张牌。它将从左侧开始向上50px，从顶部向下开始，并将每张卡拉出100w * 150h。每张卡片图像之间应该有25像素。画布尺寸设置为825w * 600h。

It should draw 18 cards to the canvas. It'll start 50px in from the left, and down from the top, and draw each card 100w*150h. There should be 25px between each card image. Canvas dimensions are set to 825w * 600h.

尝试使用普通Javascript（没有jQuery）来完成此操作。感谢任何帮助。

Trying to accomplish this with plain Javascript (no jQuery). Any help is appreciated.

图像是当前绘制到画布的方式。

The image is how it is currently drawing to my canvas.

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

推荐答案

JS变量没有作用域的范围，它们的范围是功能。因此，当img.onload访问 x 和 y 时，它们会引用x和y的最终值。
要创建块范围变量，请使用let语句或IIFE。

JS variables are not scoped to block, they are scoped to function. So when img.onload accesses x and y, they reference the final values of x and y. To create block-scoped variables, use let statements or IIFEs.

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

}

一个类似的简单问题是：

A similar simpler problem is this:

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>

这篇关于使用drawImage（）在画布上绘制多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！