Javascript HTML5图像画布数组

我正试图用HTML5和画布制作一个纸牌游戏，但当我试图在画布中央画3张纸牌时，我遇到了一个问题

错误：

未捕获类型错误：未能对“CanvasRenderingContext2D”执行“drawImage”：提供的值不是类型“（HTMLImageElement或HTMLVideoElement或HtmlCanvaSeElement或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;
    }
}

if（tableCard.length>0）
{
var x=0；
变量y=180；
var tableImage=[]；
对于（变量i=0；i

桌子卡在哪里

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

---

for（var i=0；i您试图在回调中引用索引变量。执行回调时，此变量的值超出数组的界限：

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

可能重复Hi！非常感谢您修复了我的错误，但是我需要如何以及在哪里存储X和Y属性？对不起，我是一名学生！