Canvas ctx.drawimage() 不工作

Question

我正在尝试将一些图片渲染成 canvas，但是当我使用我的渲染功能时，图像不会出现。函数是：

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.[=14 的变量中=]

Canvas ctx.drawimage() 不工作

Canvas ctx.drawimage() not working

javascript

html

canvas

drawimage