JavaScript 未在 Canvas 上绘图

Question

在这里，我正在尝试在 Canvas 上绘制图像(图像是平铺表)。但是，我已经检查过，循环工作得很好，代码正在执行，情况是正确的(我通过将文本记录到控制台来测试它)，但是控制台上没有绘制任何内容。图像加载正常。

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

这是在下面的脚本中定义的图像“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);
}

Answer 1

我根据你的代码做了一个 fiddle :http://jsfiddle.net/52GYB/2/

请注意，您已将 imgSize 设置为 80，而您提供的图像上的图 block 为 128x128 像素。 Canvas 正确渲染了图像，但只有左上角 80x80，全是白色，因此看起来像是一个错误。

另外，这里:

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() 或您选择的开发工具中的断点。