Javascript不在画布上绘制

在这里，我试图在画布上绘制图像（图像是一张瓷砖）。但是，我已经检查过了，循环工作得很好，代码正在执行，案例是正确的（我通过将文本记录到控制台来测试它），但是控制台上没有绘制任何内容。正在加载图像，效果很好

我真的不知道到底是什么导致了这个问题，控制台上没有语法错误。下面是我的代码，任何人都可能需要一点时间来分析它，但是非常感谢您的帮助

下面是脚本中定义的图像“monsterTileSheet.png”：

var canvas = document.querySelector("canvas");
var drawingSurface = canvas.getContext("2d");
var image = new Image();
image.src = "monsterTileSheet.png";
image.addEventListener("load", loadHandler, false);

var spaceInc = 0; // increment counter
var inc = 5; // increment between the tiles
var imgSize = 80;

var map = [
    [0, 0, 1, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
];

function adjustCanvas() {
    canvas.height = (map.length * imgSize) + (map.length * inc);
    canvas.width = (map[0].length * imgSize) + (map[0].length * inc);
}

var monster = {
    SIZE: 80,
    frames: 5,
    hiding: 0,
    jumping: 1,
    state: this.hiding,
    sourceX: 0,
    sourceY: 0,
    currentFrame: 0,
    COLUMNS: 3,
    start: function () {
        if (this.currentFrame < this.frames) {
            this.sourceX = Math.floor(this.currentFrame % this.COLUMNS) * this.SIZE;
            this.sourceY = Math.floor(this.currentFrame / this.COLUMNS) * this.SIZE;
            this.currentFrame++;
            renderImage();
        } else {
            window.clearInterval(interval);
            this.sourceX = 0;
            this.sourceY = 0;
            this.currentFrame = 0;
        }
    }
};

var x = 0;
var y = 0;

function renderMap() {
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[0].length; j++) {

            switch (map[i][j]) {
                case 0:
                    drawingSurface.drawImage(image,
                    0, 0, monster.SIZE, monster.SIZE, (j * imgSize) + spaceInc, i * imgSize, imgSize, imgSize);
                    if (spaceInc >= (map[0].length - 1) * inc) {
                        // reset increment
                        spaceInc = 0;
                    } else {
                        spaceInc += inc;
                    }
                    console.log("Case 0");
                    break;
                case 1:
                    x = map[i][j] * monster.SIZE
                    y = map[j] * monster.SIZE;
                    stGame();
                    console.log("Case 1");
                    break;
                default:
                    console.log(j);
                    break;
            }
        }
    }
}

function stGame() {
    interval = window.setInterval(function () {
        monster.start();
    }, 300);
}

function loadHandler() {
    adjustCanvas();
    renderMap();
}

function renderImage() {
    drawingSurface.drawImage(image,
    monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE,
    x, y, monster.SIZE, monster.SIZE);
}

var canvas=document.querySelector（“canvas”）；
var drawingSurface=canvas.getContext（“2d”）；
var image=新图像（）；
image.src=“monsterTileSheet.png”；
addEventListener（“加载”，loadHandler，false）；
var spaceInc=0；//增量计数器
var inc=5；//瓷砖之间的增量
var imgSize=80；
变量映射=[
[0, 0, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
函数adjustCanvas（）{
canvas.height=（map.length*imgSize）+（map.length*inc）；
canvas.width=（映射[0].length*imgSize）+（映射[0].length*inc）；
}
变量怪物={
尺码：80，
帧：5，
隐藏：0，
跳跃：1，
州：这个，隐藏，
sourceX:0，
资料来源:0，
当前帧：0，
栏目：3，
开始：函数（）{
if（this.currentFrame=（映射[0]。长度-1）*inc）{
//重置增量
spaceInc=0；
}否则{
spaceInc+=inc；
}
控制台日志（“案例0”）；
打破
案例1：
x=地图[i][j]*怪物大小
y=地图[j]*monster.SIZE；
stGame（）；
控制台日志（“案例1”）；
打破
违约：
控制台日志（j）；
打破
}
}
}
}
函数stGame（）{
interval=window.setInterval（函数（）{
monster.start（）；
}, 300);
}
函数loadHandler（）{
调整画布（）；
renderMap（）；
}
函数渲染（）{
drawingSurface.drawImage（图像，
monster.sourceX，monster.sourceY，monster.SIZE，monster.SIZE，
x、 y，怪物。大小，怪物。大小）；
}

我不认为什么是问题的根源，但这是一个错误：

{
    ...
    hiding: 0,
    state: this.hiding, // <-- undefined
    ...
}

{
...
隐藏：0，
状态：this.higing，//我根据您的代码制作了一把小提琴：

请注意，您已将imgSize设置为80，而您提供的图像上的平铺为128x128 px。Canvas正确渲染了图像，但仅左上角的80x80为白色，因此看起来像一个bug

此外，这里：

case 1:
      x = map[i][j]*monster.SIZE
      y = map[j]*monster.SIZE; // map[j] is an Array not number 
      stGame();
      console.log("Case 1");
      break;

你要乘以数组，所以在这个操作之后y是NaN

请记住，确保在函数中传递正确的值。请在您选择的开发人员工具中使用console.log（）或断点