無法加載在畫布上的圖像爲我的js遊戲

我想提出一個麻將遊戲在JS，我有在畫布上的一個問題加載圖像無法加載在畫布上的圖像爲我的js遊戲

帆布

// Create the canvas 
var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 512; 
canvas.height = 512; 
//draw canvas 
document.body.appendChild(canvas);

陣列

//Array with Tiles & set length to 144 which are the requested tiles 
var tiles = new Array(2);//will be 144 
//2D map array for showing the images coordinates 
var map = [[69,50],[100,150]];//will be 144 coordinates

我的功能更新（）

function update(){ 
    for(var i=0;i<tiles.length;i++){ 
      //make the tile object 
    tiles[i] = new Object();  
    tiles[i].id = i ; 
    tiles[i].selected = false; 
    //set the coordinates from map Array 
    tiles[i].x=map[i][0]; 
    tiles[i].y=map[i][1]; 
    //tiles[i].ready=false; 
       //These are for the image location works fine 
    //convert i to String 
    var sourceNumber = i.toString(); 
    //add .png to String 
    var source = sourceNumber.concat(png); 
    //add /image 
    var source = dest.concat(source); 
    tiles[i].img = new Image(); 
    tiles[i].img.onload = function(){ 
     //tiles[i].ready=true; 
     ctx.drawImage(tiles[i].img,tiles[i].x,tiles[i].y,xdimension,ydimension); 
    }; 
    tiles[i].img.src = source ; 

    } 
}

我拼命地跑它在每個我的瀏覽器就不會加載圖像，我調試對鉻和它說ctx.drawImage（...）; - >遺漏的類型錯誤：無法讀取的不確定（反覆多次）屬性「IMG」，所以我嘗試了磚[I]。就緒和負載的圖像後，但仍然有上error.Any建議我應該如何實現平鋪圖像的加載

來源

2014-04-09 Phil_Charly

第一次調用ctx.drawImage時，i的值爲2.問題是for循環（for(var i=0;i<tiles.length;i++)）在任何圖像加載之前已經完成執行。因此，調用onload函數時的i值是循環停止運行的值。最簡單的方法是將索引（i）保存到img元素中，以便您可以在onload處理程序中檢索它。

下面是你的代碼的簡單適應，似乎工作得很好。重要的變化是：

tiles[i].img.iVal = i;
和onload處理的主體。

我也：

（一）添加一個數組來保存硬編碼的圖像名稱爲了方便，而不是動態地創建他們（我不得不說出一些圖像導入格式該代碼計算）

（b）移除了drawImage呼叫xdimension和ydimension增值經銷商，因爲我不知道他們是什麼。

（C）改變.concat(png)到.concat(".png")，因爲它比宣佈了一個名爲png持有字符串.png

反正變容易，這裏的樣本代碼，我用：

<!DOCTYPE html> 
<html> 
<head> 
<script> 
window.addEventListener('load', onDocLoaded, false); 

var canvas, ctx, tiles, map; 

function onDocLoaded() 
{ 
    canvas = newEl('canvas'); 
    ctx = canvas.getContext('2d'); 
    canvas.width = canvas.height = 512; 
    document.body.appendChild(canvas); 

    tiles = new Array(2); 
    map = [[69,50],[100,150]]; 

    update(); 
} 

var imgFileNames = ["img/girl.png", "img/redbaron.png"]; 

function update() 
{ 
    for(var i=0;i<tiles.length;i++) 
    { 
     //make the tile object 
     tiles[i] = new Object();  
     tiles[i].id = i ; 
     tiles[i].selected = false; 
     //set the coordinates from map Array 
     tiles[i].x=map[i][0]; 
     tiles[i].y=map[i][1]; 
     //tiles[i].ready=false; 

     //These are for the image location works fine 
     //convert i to String 
//  var sourceNumber = i.toString(); 
     //add .png to String 
//  var source = sourceNumber.concat(".png"); 
     //add /image 
//  var source = dest.concat(source); 
     tiles[i].img = new Image(); 
     tiles[i].img.iVal = i; 
     tiles[i].img.onload = 
     function() 
     { 
      var curI = this.iVal; 
      ctx.drawImage(tiles[curI].img,tiles[curI].x,tiles[curI].y); 
      // ctx.drawImage(this,tiles[curI].x,tiles[curI].y); //equiv to above line 
     }; 
     tiles[i].img.src = imgFileNames[i]; 
    } 
} 
</script> 
<style> 
canvas 
{ 
    border: solid 1px red; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

來源

2014-04-09 16:07:46 enhzflep

無法加載在畫布上的圖像爲我的js遊戲

回答

相關問題