Question

我正在尝试将一些图片渲染到画布中，但是当我使用渲染功能时，图像将不会出现。功能是：

function populateSquareImages(){
    for(var i = 0,ii = squares.length; i < ii; i++) {
        if(squares[i].hasImage) {
            var img = new Image();
            img.src = "../Content/Squares/images/square_" + squares[i].uniqueId + ".png";
            context.drawImage(img, squares[i].x, squares[i].y);
        }
    }
}

经过一些调试后，我确信x和y是准确的。图像文件路径也是正确的。想知道这里可能出现什么问题吗？

Answer 1

在尝试绘制图像之前，您需要等待图像加载。这应该有效：

function populateSquareImages () {
    for (var i = 0, ii = squares.length; i < ii; i++) {
        if (squares[i].hasImage) {
            var img = new Image(),
                square = squares[i];
            img.src = "../Content/Squares/images/square_" + squares[i].uniqueId + ".png";
            img.onload = function () {
                context.drawImage(img, square.x, square.y);
            };
        }
    }
}

变量i在回调函数调用时将不正确，因此将squares[i]的值存储在另一个名为square的变量中。

画布ctx.drawimage（）不起作用

1 个答案: