图片画布HTML5数组

Question

我正在尝试使用Canvas在HTML5中制作纸牌游戏，但是当我尝试在画布中心绘制3张纸牌时出现问题。

错误：

未捕获到的TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是'（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）类型的值

我的代码：

if (tableCard.length > 0)
{
    var x = 0;
    var y = 180;
    var tableImage = [];
    for (var i = 0; i < tableCard.length; i++)
    {                                                
        tableImage[i] = new Image();

        tableImage[i].onload = function () {                            
            context.drawImage(tableImage[i], x, y);
        };
        x = +90;
        carterimanenti = deckOfCard.length;
        tableImage[i].src = tableCard[i].picture;
    }
}

在哪里tableCard

for(var i=0; i<3; i++)
{
    var cartaU = drawRandomCard();
    tableCard.push(new Card(cartaU.Name, cartaU.semeTipo, cartaU.CardValue, cartaU.picture));
}

Answer 1

您正在尝试在回调中引用索引变量。 执行回调时，此变量的值超出数组的范围：

context.drawImage(tableImage[**i**], x, y);

您将需要以另一种方式提取适用的图像元素：

tableImage[i].onload = function (event) {
    context.drawImage(event.target, x, y);
};

现在，我注意到您的x和y坐标也在闭包中引用。 这也行不通。 您将需要将x和y存储为图像元素的属性或数据。 您可以执行以下操作：

var image = tableImage[i];
image.setAttribute("data-x", x);
image.setAttribute("data-y", y);
tableImage[i].onload = function () {
    var image = event.target,
        x = parseInt(image.getAttribute("data-x", 10),
        y = parseInt(image.getAttribute("data-y", 10);                          
    context.drawImage(image, x, y);
};