Question

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

错误：

Uncaught 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);
};

图像画布HTML5的数组

1 个答案: