HTML5 Canvas圖像功能觸發，但有時未繪制圖像
[英]HTML5 Canvas image functions fire but sometimes images are not drawn
問題描述
我正在為telnet游戲創建界面。 當我獲得telnet更新時，圖像功能啟動，並且所有內容都被解析。
在大多數情況下，我的功能正常運行。 有時，當圖像更改時，第一個圖像函數floorLoad和第四個圖像函數southWall會繪制在畫布上。 我正在使用函數加載器，並且在控制台中可以看到所有圖像函數均已啟動並且順序正確。 如果我離開后回到房間重新加載房間，則按預期運行。 這是我在說的視覺示例。
這是正常情況下的樣子
這是發生的錯誤
注意地板覆蓋了整個區域floorLoad和向下的箭頭，即southWall
關於故障排除的任何幫助或指導將不勝感激。 我沒有404，所有圖像都從緩存加載，當您第一次加載到頁面時，我使用圖像預加載器：
// Preload Room Art
$('#preload').load('art_preload.php', function() {
$('#preload').remove();
});
以下是我的房間美術功能：
function room_update (str) {
var north_wall_neg;
var east_wall_neg;
var south_wall_neg;
var west_wall_neg;
//////////////////////////////////////////////////////////////////
// Room Exits
//////////////////////////////////////////////////////////////////
var exits;
var room_exits = str.match( /<prompt\ .*~(.*)~.*>/ );
if ( room_exits !== null && room_exits.length !== 0 ) {
exits = room_exits[1];
} else {
exits = "";
}
//////////////////////////////////////////////////////////////////
// Room Art
//////////////////////////////////////////////////////////////////
var room_art = str.match( /<RA\ (.*)\ (.*)\ (.*)\ (.*)\ (.*)>/ );
if ( room_art !== null && room_art.length !== 0 ) {
function roomArt () {
var defer = $.Deferred();
//////////////////////////////////////////////////////////////////
// Vars
//////////////////////////////////////////////////////////////////
var imgPath = "./images/room_art/";
//////////////////////////////////////////////////////////////////
// Floor
//////////////////////////////////////////////////////////////////
var floor_tile_num = room_art[5];
function floorLoad (floor_tile_num) {
var defer = $.Deferred();
var images = ['tile' + floor_tile_num + '.png'];
var loadedImages = {};
var promiseArray = images.map(function(imgurl){
var prom = new Promise(function(resolve,reject){
var img = new Image();
img.onload = function(){
loadedImages[imgurl] = img;
resolve();
};
img.src = imgPath + imgurl;
});
return prom;
});
Promise.all(promiseArray).then(function(){
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 2, 345);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 52, 345);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 102, 345);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 152, 345);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 202, 345);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 252, 345);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 302, 345);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 352, 345);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 45);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 95);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 145);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 195);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 245);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 295);
ctx.drawImage(loadedImages['tile' + floor_tile_num + '.png'], 402, 345);
});
console.log("<-- FLOOR -->");
return defer;
}
//////////////////////////////////////////////////////////////////
// North Wall
//////////////////////////////////////////////////////////////////
var north_wall_num = room_art[1];
if ( north_wall_num < 0 ) {
north_wall_num = north_wall_num.replace("-", "");
north_wall_neg = "1";
}
function northWall (pos, north_wall_num) {
var defer = $.Deferred();
if ( pos.indexOf(" N ") != -1 ) {
var arrowExit = new Image();
arrowExit.src = './images/room_art/arrowExit.png';
arrowExit.onload = function(){
ctx.drawImage(arrowExit, 201, 45);
};
} else {
var images = ['Cwall' + north_wall_num + '.png', 'wall' + north_wall_num + '.png', 'Door1.png', 'DoorN1.png'];
var loadedImages = {};
var promiseArray = images.map(function(imgurl){
var prom = new Promise(function(resolve,reject){
var img = new Image();
img.onload = function(){
loadedImages[imgurl] = img;
resolve();
};
img.src = imgPath + imgurl;
});
return prom;
});
Promise.all(promiseArray).then(function(){
// Corners
if ( pos.indexOf(" W ") != -1 ) {
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 2, 45);
} else if ( north_wall_neg == "1" ) {
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 2, 45);
} else {
drawRotatedImage(loadedImages['Cwall' + north_wall_num + '.png'], 27, 70, 270);
}
if ( pos.indexOf(" E ") != -1 ) {
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 402, 45);
} else if ( north_wall_neg == "1" ) {
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 402, 45);
} else {
ctx.drawImage(loadedImages['Cwall' + north_wall_num + '.png'], 402, 45);
}
// Walls
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 52, 45);
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 102, 45);
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 152, 45);
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 202, 45);
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 252, 45);
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 302, 45);
ctx.drawImage(loadedImages['wall' + north_wall_num + '.png'], 352, 45);
// Door
if ( pos.indexOf(" -N ") != -1 ) {
ctx.drawImage(loadedImages['Door1.png'], 217, 65);
}
if ( pos.indexOf(" oN ") != -1 ) {
ctx.drawImage(loadedImages['DoorN1.png'], 217, 65);
}
});
}
console.log("<-- N WALL -->");
return defer;
}
//////////////////////////////////////////////////////////////////
// East Wall
//////////////////////////////////////////////////////////////////
var east_wall_num = room_art[2];
function eastWall (pos, east_wall_num) {
var defer = $.Deferred();
if ( pos.indexOf(" E ") != -1 ) {
var arrowExit = new Image();
arrowExit.src = './images/room_art/arrowExit.png';
arrowExit.onload = function(){
drawRotatedImage(arrowExit, 427, 221, 90);
};
} else {
if ( pos.indexOf(" -E ") != -1 ) {
var images = ['Cwall' + east_wall_num + '.png', 'wall' + east_wall_num + '.png', 'Door1.png'];
} else if ( pos.indexOf(" oE ") != -1 ) {
var images = ['Cwall' + east_wall_num + '.png', 'wall' + east_wall_num + '.png', 'DoorN1.png'];
} else {
var images = ['Cwall' + east_wall_num + '.png', 'wall' + east_wall_num + '.png'];
}
var loadedImages = {};
var promiseArray = images.map(function(imgurl){
var prom = new Promise(function(resolve,reject){
var img = new Image();
img.onload = function(){
loadedImages[imgurl] = img;
resolve();
};
img.src = imgPath + imgurl;
});
return prom;
});
Promise.all(promiseArray).then(function(){
// Walls
if ( pos.indexOf(" N ") != -1 ) {
drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 70, 90);
}
drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 120, 90);
drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 170, 90);
drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 220, 90);
drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 270, 90);
drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 320, 90);
if ( pos.indexOf(" S ") != -1 ) {
drawRotatedImage(loadedImages['wall' + east_wall_num + '.png'], 427, 370, 90);
}
// Door
if ( pos.indexOf(" -E ") != -1 ) {
drawRotatedImage(loadedImages['Door1.png'], 417, 221, 90);
}
if ( pos.indexOf(" oE ") != -1 ) {
drawRotatedImage(loadedImages['DoorN1.png'], 417, 221, 90);
}
});
}
console.log("<-- E WALL -->");
return defer;
}
//////////////////////////////////////////////////////////////////
// South Wall
//////////////////////////////////////////////////////////////////
var south_wall_num = room_art[3];
if ( south_wall_num < 0 ) {
south_wall_num = south_wall_num.replace("-", "");
south_wall_neg = "1";
}
function southWall (pos, south_wall_num) {
var defer = $.Deferred();
if ( pos.indexOf(" S ") != -1 ) {
var arrowExit = new Image();
arrowExit.src = './images/room_art/arrowExit.png';
arrowExit.onload = function(){
drawRotatedImage(arrowExit, 228, 370, 180);
};
} else {
if ( pos.indexOf(" -S ") != -1 ) {
var images = ['Cwall' + south_wall_num + '.png', 'wall' + south_wall_num + '.png', 'Door1.png'];
} else if ( pos.indexOf(" oS ") != -1 ) {
var images = ['Cwall' + south_wall_num + '.png', 'wall' + south_wall_num + '.png', 'DoorN1.png'];
} else {
var images = ['Cwall' + south_wall_num + '.png', 'wall' + south_wall_num + '.png'];
}
var loadedImages = {};
var promiseArray = images.map(function(imgurl){
var prom = new Promise(function(resolve,reject){
var img = new Image();
img.onload = function(){
loadedImages[imgurl] = img;
resolve();
};
img.src = imgPath + imgurl;
});
return prom;
});
Promise.all(promiseArray).then(function(){
// Corners
var south_wall_num_neg;
if ( pos.indexOf(" W ") != -1 ) {
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 27, 370, 180);
} else if ( south_wall_neg == "1" ) {
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 27, 370, 180);
} else {
drawRotatedImage(loadedImages['Cwall' + south_wall_num + '.png'], 27, 370, 180);
}
if ( pos.indexOf(" E ") != -1 ) {
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 427, 370, 180);
} else if ( south_wall_neg == "1" ) {
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 427, 370, 180);
} else {
drawRotatedImage(loadedImages['Cwall' + south_wall_num + '.png'], 427, 370, 90);
}
// Walls
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 77, 370, 180);
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 127, 370, 180);
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 177, 370, 180);
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 227, 370, 180);
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 277, 370, 180);
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 327, 370, 180);
drawRotatedImage(loadedImages['wall' + south_wall_num + '.png'], 377, 370, 180);
// Door
if ( pos.indexOf(" -S ") != -1 ) {
drawRotatedImage(loadedImages['Door1.png'], 227, 360, 180);
}
if ( pos.indexOf(" oS ") != -1 ) {
drawRotatedImage(loadedImages['DoorN1.png'], 227, 360, 180);
}
});
}
console.log("<-- S WALL -->");
return defer;
}
//////////////////////////////////////////////////////////////////
// West Wall
//////////////////////////////////////////////////////////////////
var west_wall_num = room_art[4];
function westWall (pos, west_wall_num) {
var defer = $.Deferred();
if ( pos.indexOf(" W ") != -1 ) {
var arrowExit = new Image();
arrowExit.src = './images/room_art/arrowExit.png';
arrowExit.onload = function(){
drawRotatedImage(arrowExit, 27, 217, 270);
};
} else {
if ( pos.indexOf(" -W ") != -1 ) {
var images = ['Cwall' + west_wall_num + '.png', 'wall' + west_wall_num + '.png', 'Door1.png'];
} else if ( pos.indexOf(" oW ") != -1 ) {
var images = ['Cwall' + west_wall_num + '.png', 'wall' + west_wall_num + '.png', 'DoorN1.png'];
} else {
var images = ['Cwall' + west_wall_num + '.png', 'wall' + west_wall_num + '.png'];
}
var loadedImages = {};
var promiseArray = images.map(function(imgurl){
var prom = new Promise(function(resolve,reject){
var img = new Image();
img.onload = function(){
loadedImages[imgurl] = img;
resolve();
};
img.src = imgPath + imgurl;
});
return prom;
});
Promise.all(promiseArray).then(function(){
// Walls
if ( pos.indexOf(" N ") != -1 ) {
drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 70, 270);
}
drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 120, 270);
drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 170, 270);
drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 220, 270);
drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 270, 270);
drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 320, 270);
if ( pos.indexOf(" S ") != -1 ) {
drawRotatedImage(loadedImages['wall' + west_wall_num + '.png'], 27, 370, 270);
}
// Door
if ( pos.indexOf(" -W ") != -1 ) {
drawRotatedImage(loadedImages['Door1.png'], 36, 217, 270);
}
if ( pos.indexOf(" oW ") != -1 ) {
drawRotatedImage(loadedImages['DoorN1.png'], 36, 217, 270);
}
});
}
console.log("<-- W WALL -->");
return defer;
}
//////////////////////////////////////////////////////////////////
// Room Art Function Calls
//////////////////////////////////////////////////////////////////
floorLoad(floor_tile_num)
.then(northWall(exits, north_wall_num))
.then(eastWall(exits, east_wall_num))
.then(southWall(exits, south_wall_num))
.then(westWall(exits, west_wall_num));
console.log("<-- SEQUENCE -->");
return defer;
}
roomArt();
}
//////////////////////////////////////////////////////////////////
// On <prompt
//////////////////////////////////////////////////////////////////
if ( room_exits !== null && room_exits.length !== 0 ) {
console.log("Room exists...");
function darkRoom () {
var defer = $.Deferred();
var room_dark = str.match( /<room\ .*><(.*)>.*<room end>/ );
if ( room_dark !== null && room_dark.length !== 0 ) {
if ( room_dark[1] == "dark" ) {
ctx.fillStyle = "#000000";
ctx.fillRect(2, 45, 450, 350);
console.log("it's dark!");
}
}
return defer;
}
darkRoom();
// Door Artwork
// North Wall
switch (true) {
case room_exits[1].indexOf(" N ") != -1:
var arrowExit_n = new Image();
arrowExit_n.src = './images/room_art/arrowExit.png';
arrowExit_n.onload = function(){
ctx.drawImage(arrowExit_n, 201, 45);
};
break;
case room_exits[1].indexOf(" -N ") != -1:
var doorClosed_n = new Image();
doorClosed_n.src = './images/room_art/Door1.png';
doorClosed_n.onload = function(){
ctx.drawImage(doorClosed_n, 217, 65);
};
break;
case room_exits[1].indexOf(" oN ") != -1:
var doorOpen_n = new Image();
doorOpen_n.src = './images/room_art/DoorN1.png';
doorOpen_n.onload = function(){
ctx.drawImage(doorOpen_n, 217, 65);
};
break;
}
// West Wall
switch (true) {
case room_exits[1].indexOf(" W ") != -1:
var arrowExit_w = new Image();
arrowExit_w.src = './images/room_art/arrowExit.png';
arrowExit_w.onload = function(){
drawRotatedImage(arrowExit_w, 27, 217, 270);
};
break;
case room_exits[1].indexOf(" -W ") != -1:
var doorClosed_w = new Image();
doorClosed_w.src = './images/room_art/Door1.png';
doorClosed_w.onload = function(){
drawRotatedImage(doorClosed_w, 36, 217, 270);
};
break;
case room_exits[1].indexOf(" oW ") != -1:
var doorOpen_w = new Image();
doorOpen_w.src = './images/room_art/DoorN1.png';
doorOpen_w.onload = function(){
drawRotatedImage(doorOpen_w, 36, 217, 270);
};
break;
}
// South Wall
switch (true) {
case room_exits[1].indexOf(" S ") != -1:
var arrowExit_s = new Image();
arrowExit_s.src = './images/room_art/arrowExit.png';
arrowExit_s.onload = function(){
drawRotatedImage(arrowExit_s, 228, 370, 180);
};
break;
case room_exits[1].indexOf(" -S ") != -1:
var doorClosed_s = new Image();
doorClosed_s.src = './images/room_art/Door1.png';
doorClosed_s.onload = function(){
drawRotatedImage(doorClosed_s, 227, 360, 180);
};
break;
case room_exits[1].indexOf(" oS ") != -1:
var doorOpen_s = new Image();
doorOpen_s.src = './images/room_art/DoorN1.png';
doorOpen_s.onload = function(){
drawRotatedImage(doorOpen_s, 227, 360, 180);
};
break;
}
// East Wall
switch (true) {
case room_exits[1].indexOf(" E ") != -1:
var arrowExit_e = new Image();
arrowExit_e.src = './images/room_art/arrowExit.png';
arrowExit_e.onload = function(){
drawRotatedImage(arrowExit_e, 427, 221, 90);
};
break;
case room_exits[1].indexOf(" -E ") != -1:
var doorClosed_e = new Image();
doorClosed_e.src = './images/room_art/Door1.png';
doorClosed_e.onload = function(){
drawRotatedImage(doorClosed_e, 417, 221, 90);
};
break;
case room_exits[1].indexOf(" oE ") != -1:
var doorOpen_e = new Image();
doorOpen_e.src = './images/room_art/DoorN1.png';
doorOpen_e.onload = function(){
drawRotatedImage(doorOpen_e, 417, 221, 90);
};
break;
}
// Stairs
switch (true) {
case room_exits[1].indexOf(" U ") != -1:
var stairsUp = new Image();
stairsUp.src = './images/room_art/stairsUP.png';
stairsUp.onload = function(){
ctx.drawImage(stairsUp, 205, 221);
};
break;
case room_exits[1].indexOf(" -U ") != -1:
var stairsUp = new Image();
stairsUp.src = './images/room_art/stairsUP.png';
stairsUp.onload = function(){
ctx.drawImage(stairsUp, 205, 221);
};
break;
case room_exits[1].indexOf(" oU ") != -1:
var stairsUp = new Image();
stairsUp.src = './images/room_art/stairsUP.png';
stairsUp.onload = function(){
ctx.drawImage(stairsUp, 205, 221);
};
break;
case room_exits[1].indexOf(" D ") != -1:
var stairsDown = new Image();
stairsDown.src = './images/room_art/stairsDOWN.png';
stairsDown.onload = function(){
ctx.drawImage(stairsDown, 205, 221);
};
break;
case room_exits[1].indexOf(" -D ") != -1:
var stairsDown = new Image();
stairsDown.src = './images/room_art/stairsDOWN.png';
stairsDown.onload = function(){
ctx.drawImage(stairsDown, 205, 221);
};
break;
case room_exits[1].indexOf(" oD ") != -1:
var stairsDown = new Image();
stairsDown.src = './images/room_art/stairsDOWN.png';
stairsDown.onload = function(){
ctx.drawImage(stairsDown, 205, 221);
};
break;
}
}
room_art = "";
north_wall_neg = "";
east_wall_neg = "";
south_wall_neg = "";
west_wall_neg = "";
}
控制台輸出：
<-- FLOOR -->
<-- N WALL -->
<-- E WALL -->
<-- S WALL -->
<-- W WALL -->
<-- SEQUENCE -->
1 個解決方案
解決方案1
0 2019-04-25 06:28:04
控制台輸出不能證明代碼正在按照您認為的方式運行。 使用諾言的方式存在一些問題。 我建議添加更多調試語句，以確保所有代碼都在實際執行。
首先，我相信您會混淆兩個不同的系統來實現承諾（並且沒有正確使用它們）：
-
$.Deferred()是jQuery的實現 -
new Promise()是本機JS實現
因此， floorLoad.then()和promiseArray.之間絕對沒有任何關系promiseArray. 也許這是有意為之，但只會與一種承諾相混淆。
如果您有defer = $.Deferred() ，則應在某個地方解決該defer問題。 您的代碼缺少defer.resolve() 。
通常情況下，缺乏defer.resolve()將意味着傳遞給代碼.then()永遠不會執行，但有一個第二個問題：這些里面的代碼.then()調用不包裹在里面的功能：
floorLoad(floor_tile_num)
.then(northWall(exits, north_wall_num))
.then(eastWall(exits, east_wall_num))
.then(southWall(exits, south_wall_num))
.then(westWall(exits, west_wall_num))
如果沒有用於包裝它們的函數，則代碼將立即執行，並將結果傳遞給.then()因此該代碼與以下代碼基本相同：
floorLoad(floor_tile_num);
northWall(exits, north_wall_num);
eastWall(exits, east_wall_num);
southWall(exits, south_wall_num);
westWall(exits, west_wall_num);
所以我建議你：
- 選擇一種承諾類型，並在任何地方堅持下去。
- 將
.then()代碼與函數包裝在一起，這樣實際上會延遲執行。 - 添加更多調試日志記錄。 特別：
- 確保每個
.onload()都按預期方式被調用。 - 確保每個
.all()都按預期被調用。
- 確保每個
html5 canvas為拖放到畫布上的圖像添加了拖放功能
[英]html5 canvas adding drag and drop functionality to images drawn to the canvas
HTML5 Canvas ~ 使用繪制的元素平滑快速縮放，而不是圖像 ~ 如何？
[英]HTML5 Canvas ~ Smooth Rapid Scaling with Drawn Elements, Not Images ~ How to?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.