Javascript不在画布上绘图

在这里，我试图在画布上绘制图像（图像是瓦片）。但是，我已经检查过，循环工作正常，代码正在执行，情况正确（我通过将日志文本记录到控制台进行测试），但是控制台上没有任何内容正在绘制。图像正在加载很好。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); 
}

来源

2014-03-31 DaBaws

我已经根据您的代码制作了小提琴：http://jsfiddle.net/52GYB/2/

请注意，您已将imgSize设置为80，而您提供的图像上的图块为128x128像素。画布正确地渲染了图像，但只有左上角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（）或断点。

来源

2014-04-01 08:55:52 kihu

非常感谢！ :)真的很感激时间和精力。 – DaBaws

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

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

来源

2014-03-31 14:52:48 Vlad

呃，我试过了，但仍然没有工作。 – DaBaws

Javascript不在画布上绘图

回答

相关问题