putImageData不會畫到畫布

Question

的地形設置http://mystikrpg.com/images/all_tiles.png

它仍然不會畫分手了到我知道，因爲它在console.log(tileData[1])輸出的ImageData它被裝進tileData[]的<canvas>後。

$(document).ready(function() { 

var tileWidth, tileHeight 
ImageWidth = 736; 
ImageHeight = 672; 
tileWidth = 32; 
tileHeight = 32; 

    console.log("Client setup..."); 
    canvas = document.getElementById("canvas"); 
    canvas.width = 512; 
    canvas.height = 352; 
    context = canvas.getContext("2d"); 
    canvas.tabIndex = 0; 
    canvas.focus(); 
    console.log("Client focused."); 

    var imageObj = new Image(); 
    imageObj.src = "./images/all_tiles.png"; 
    imageObj.onload = function() { 
    context.drawImage(imageObj, ImageWidth, ImageHeight); 


    var allLoaded = 0; 
    var tilesX = ImageWidth/tileWidth; 
    var tilesY = ImageHeight/tileHeight; 
    var totalTiles = tilesX * tilesY;   
    for(var i=0; i<tilesY; i++) 
    { 
     for(var j=0; j<tilesX; j++) 
     {   
     // Store the image data of each tile in the array. 
     tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight)); 
     allLoaded++; 
     } 
    } 


    if (allLoaded == totalTiles) { 
    console.log("All done: " + allLoaded); // 483 
    console.log(tileData[1]); // > ImageData 
    startGame(); 
    } 
    }; 

}); 

也

var startGame = function() { 

    console.log("Trying to paint test tile onto convas..."); 

    try { 
    context.putImageData(tileData[0], 0, 0); 
    } catch(e) { 
     console.log(e); 
    } 
    } 

Answer 1

當你繪製圖像畫布開始，你爲什麼：

context.drawImage(imageObj, ImageWidth, ImageHeight); 

看起來你可能已經在參數困惑，並試圖填補區域與ImageWidth，ImageHeight ...相反，將其繪製到0,0

context.drawImage(imageObj, 0, 0); 

這是你的代碼調整一點點：

var tileData = []; 

var tileWidth, tileHeight 
var ImageWidth = 736; 
var ImageHeight = 672; 
var tileWidth = 32; 
var tileHeight = 32; 
var tilesX; 
var tilesY 
var totalTiles; 
canvas = document.getElementById("canvas"); 
canvas.width = ImageWidth; 
canvas.height = ImageHeight; 
context = canvas.getContext("2d"); 

var imageObj = new Image(); 
imageObj.src = "all_tiles.png"; 
imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0); 
// draw the image to canvas so you can get the pixels context.drawImage(imageObj, 0, 0); 

    tilesX = ImageWidth/tileWidth; 
    tilesY = ImageHeight/tileHeight; 
    totalTiles = tilesX * tilesY; 
    for(var i=0; i<tilesY; i++) { 
    for(var j=0; j<tilesX; j++) { 
     // Store the image data of each tile in the array. 

     tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight)); 
    } 
    } 

    // test it... 
    // blank the canvas and draw tiles back in random positions 
    context.fillStyle = "rgba(255,255,255,1)"; 
    context.fillRect(0,0,canvas.width, canvas.height); 
    for (i = 0; i < 20; i++) { 
    context.putImageData(tileData[ i ], Math.random() * canvas.width, Math.random() * canvas.height); 
    } 

}; 

沒有必要測試「全部加載」，因爲它只是一個形象，你裂開。