Javascript 我无法使用下面的代码段创建画布。图像也未加载

window.onload=function（）{
canvas=document.createElement（'canvas'）；
ctx=canvas.getContext（“2d”）；
//为加载的图像创建一个数组
LoadeImage=新数组（）；
画布宽度=505；
canvas.height=606；
行图像=[
'images/water block.png'，//最上面一行是水
'images/stone block.png'，//第1行，共3行
'images/stone block.png'，//stone第2行，共3行
'images/stone block.png'，//stone第3行，共3行
'images/grass block.png'，//草的第1行，共2行
'images/grass block.png'//草的第2行，共2行
];
numRows=6；
numCols=5；
//加载之前的图像
rowImages.forEach（项=>{
img=新图像（）；
img.src=项目；
img.onload=函数（）{
log（'在onload事件中'）；
加载图像。推（此）；
}
img.onerror=函数（e）{
log（'我的图像有错误'，e）；
}
});
对于（行=0；行}

您的

img.onload

事件不会触发，因为没有要加载的内容。 在加载事件内部设置

img.src

，必须在外部设置

您可以在以下操作之前加载图像：

//create a array for the loaded Images
var loadedImages = new Array();

//Load images before
rowImages.forEach(item => {
    var img = new Image();
    img.src = item;
    img.onload = function () {
        console.log('Inside the onload Event');
        loadedImages.push(this);
    }
    img.onerror = function(e){
        console.log('I have an Error with my Images', e);
    }
});

加载所有图像后，可以将它们绘制到画布上

下面是一个完整的示例：

window.onload = function () {
    /* declaration */
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext("2d");
    let loadedImages = new Array();
    let numRows = 6;
    let numCols = 5;
    let rowImages = [
        'images/water-block.png', // Top row is water
        'images/stone-block.png', // Row 1 of 3 of stone
        'images/stone-block.png', // Row 2 of 3 of stone
        'images/stone-block.png', // Row 3 of 3 of stone
        'images/grass-block.png', // Row 1 of 2 of grass
        'images/grass-block.png' // Row 2 of 2 of grass
    ];
    let imageLength = rowImages.length;

    canvas.width = 505;
    canvas.height = 606;        
    rowImages.forEach(item => {
        img = new Image();
        img.src = item;
        img.onload = function(){
            /***********************************************
            **
            **  This event fires, when the Image is loaded.
            **  That does NOT mean, that the first image you started, will be loaded fist as well.
            **  Obviously a 5MB mage takes longer to load, than a 200kb image.
            **  You have to wait until ALL images are loaded.
            **
            ***********************************************/
            loadedImages.push(this);
            if(loadedImages.length === imageLength){
                paintToCanvas(loadedImages,numRows,numCols);
            }
        }
        img.onerror = function (e) {
            console.log('I have an Error with my Images', e);
        }
    });


    /***********************************************
    **
    **  This function is called AFTER all Images are loaded
    **  In here you can do your for loops and paint to Canvas
    **
    ***********************************************/

    function paintToCanvas(loadedImages,numRows,numCols){
        /* Here you can add your for loops and paint to Canvas */
    }
}

---

您的问题只是没有将画布添加到文档中

可能想看看承诺

window.onload=function（）{
canvas=document.createElement（'canvas'）；
ctx=canvas.getContext（“2d”）；
//将画布添加到文档中
document.body.appendChild（画布）；
LoadeImage=新数组（）；
画布宽度=505；
canvas.height=606；
行图像=[
'https://via.placeholder.com/10x10',
'https://via.placeholder.com/20x20',
'https://via.placeholder.com/30x30',
'https://via.placeholder.com/40x40',
'https://via.placeholder.com/50x50',
'https://via.placeholder.com/60x60'
];
numRows=6；
numCols=5；
让承诺=[]；
rowImages.forEach（（项目）=>{
让承诺=新承诺（（res，rej）=>{
设img=新图像（）；
img.src=项目；
img.onload=函数（）{
加载图像。推（此）；
res（img）；
}
img.onerror=函数（e）{
rej（“我的图像有错误”）；
}
});
承诺。推动（承诺）
});
//在所有的承诺都解决之后
//表示加载阵列中的所有图像后
//画画
承诺。所有（承诺）。然后（（img）=>{
对于（行=0；行}

在第14到16行中，您使用的是“，”而不是分号。您确定并没有收到任何错误吗？我想这不会引起问题，因为这只是变量的声明。尽管如此，我还是再次尝试将第14行到第16行中的“；”替换为“；”，但问题仍然存在。感谢您的回答：）问题在img.onload函数中尝试调试它。在控制台中，img.onload没有收到任何错误。控件跳过了这个函数。forEach首先在上面声明的所有变量中给我一个referenceError。当我从所有声明中删除var时，问题就解决了。但我之前的问题仍然存在。控件未进入img.onload函数。最可能发生referenceError的原因是您在

onload

函数内使用了声明的变量，而在此函数外使用了

forEach

。很难说清楚，但可能性很大。如果您的

onload

功能仍未启动，则可能是您的图像路径已关闭。我将编辑帖子并添加一个错误函数。控件根本不进入错误函数。此外，我无法理解流程。它只在forEach循环中运行6次，而没有进入其中的任何函数。然后它出来并在嵌套for循环中运行5*6次。在此之后，控件返回img.onload函数，并打印console.log消息6次，LoadeImage的大小增加到6。我已经用更新的代码编辑了主代码段。现在我添加了一个带有注释的完整示例。我希望这能让你更容易理解。这不是最漂亮的代码，但它现在可以工作，希望能帮助你。谢谢。。。它正在工作：）我只需要在代码段中添加“document.body.appendChild（canvas）；”