爲什麼我的地圖每當我的精靈移動時都會消失？

Question

這個週末試圖讓我的第一場比賽。我最終讓我的矩形與我的地圖同時出現。我的矩形可以移動！但只要我點擊一個按鈕來移動它，地圖就會消失。這是我需要做出某種遊戲循環來持續更新每個按鈕點擊地圖或設置一個計時器嗎？或者我還有其他類型的錯誤？謝謝大家！

var canvas = <HTMLCanvasElement>document.getElementById('myCanvas'); 
var context = canvas.getContext("2d"); 
var img = new Image(); 
img.onload = function() { 
    context.drawImage(img, 0, 0); 
} 
img.src = ""; 



var mapArray = 
     ["############################", 
     "#  # #  o  ##", 
     "#       #", 
     "# #### ##### ##  #", 
     "##   # # ##  #", 
     "###   ##  #  #", 
     "#   ###  #  #", 
     "# ####   ###  #", 
     "# ## # o    #", 
     "# o # # o ### ### #", 
     "# # #    #", 
     "############################"]; 

//need to add wall.scource = and grass.source = 
var wall = new Image(); 
var grass = new Image(); 
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en"; 
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z"; 


var posX = 0; 
var posY = 0; 




//for loops set images at given coordinates according to position on mapArray 
for (var y = 0; y < mapArray.length; y++) { 
    for (var x = 0; x < mapArray[0].length; x++) { 

     if (mapArray[y][x] == "") { 
      context.drawImage(grass, (32 * x), (32 * y), 32, 32)//last two are size of image) 
     } 
     if (mapArray[y][x] == "#") { 
      context.drawImage(wall, (32 * x), (32 * y), 32, 32)//last two are size of image) 
     } 
} 
} 

context.rect(posX, posY, 32, 32) 
context.stroke();//traces path, might not need this 


//moves character 
function move(e) {//next five lines are newly added. Final line of function is drawimage function that is new as well 
    var ctx = canvas.getContext('2d');// create backing canvas 
    var backCanvas = document.createElement('canvas'); 
    backCanvas.width = canvas.width; 
    backCanvas.height = canvas.height; 
    var backCtx = backCanvas.getContext('2d'); 

    //alert(e.keyCode);//gives feedback to what each keyCode is 
    if (e.keyCode == 39) { 
     posX += 5; 
    } 
    if (e.keyCode == 37) { 
     posX -= 5; 
    } 
    if (e.keyCode == 40) { 
     posY += 5; 
    } 
    if (e.keyCode == 38) { 
     posY -= 5; 

    } 
    canvas.width = canvas.width;//clears the board after each move 
    context.rect(posX, posY, 32, 32) 
    context.stroke(); 
    ctx.drawImage(backCanvas, 0, 0); 
}  
document.onkeydown = move; 

Answer 1

的jsfiddle：基於備份畫布想法html5: copy a canvas to image and back

---

代碼https://jsfiddle.net/j353agny/3/

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext("2d"); 

var mapArray = ["############################", 
    "#  # #  o  ##", 
    "#       #", 
    "# #### ##### ##  #", 
    "##   # # ##  #", 
    "###   ##  #  #", 
    "#   ###  #  #", 
    "# ####   ###  #", 
    "# ## # o    #", 
    "# o # # o ### ### #", 
    "# # #    #", 
    "############################"]; 

//need to add wall.scource = and grass.source = 
var wall = new Image(); 
var grass = new Image(); 
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en"; 
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z"; 

// Player position 

var posX = 0; 
var posY = 0; 

//moves character 
function move(e) { 

    //alert(e.keyCode);//gives feedback to what each keyCode is 
    if (e.keyCode == 39) { 
     posX += 5; 
    } 
    if (e.keyCode == 37) { 
     posX -= 5; 
    } 
    if (e.keyCode == 40) { 
     posY += 5; 
    } 
    if (e.keyCode == 38) { 
     posY -= 5; 

    } 
} 

document.onkeydown = move; 

// every 3 miliseconds re-draw the stage with the player 
setInterval(function() { 
    console.log("REDRAW"); 
    // Clear the canvas and redraw 
    context.fillStyle = "#FFF"; 
    context.fillRect(0,0,800,600); 

    //for loops set images at given coordinates according to position on mapArray 
    for (var y = 0; y < mapArray.length; y++) { 
     for (var x = 0; x < mapArray[0].length; x++) { 

      if (mapArray[y][x] == "") { 
       context.drawImage(grass, (32 * x), (32 * y), 32, 32) //last two are size of image) 
      } 
      if (mapArray[y][x] == "#") { 
       context.drawImage(wall, (32 * x), (32 * y), 32, 32) //last two are size of image) 
      } 
     } 
    } 
    context.fillStyle = "#00F"; 
    context.fillRect(posX, posY, 32, 32) 
}, 3); 

你可以做的是隻使用一個的setInterval其將每3毫秒運行一次。基本上每3毫秒我就會得到畫布重新繪製牆壁，然後重新繪製您的球員。這將停止你有任何奇怪的繪圖問題。

P.S.你可以使用​​而不是setInterval來讓你知道

Answer 2

是您canvas.width = canvas.width;將清除畫布，你會移動後只用rect結束。您也可以在移動函數中執行所有渲染代碼，或者爲地圖製作備份畫布，以便您可以高效地將其渲染到移動函數的頂部，而不必每次都跳過mapArray。在這裏，他們使用備份帆布：

var canvas = <HTMLCanvasElement>document.getElementById('myCanvas'); 
var context = canvas.getContext("2d"); 
var img = new Image(); 
img.onload = function() { 
    context.drawImage(img, 0, 0); 
} 
img.src = ""; 



var mapArray = 
     ["############################", 
     "#  # #  o  ##", 
     "#       #", 
     "# #### ##### ##  #", 
     "##   # # ##  #", 
     "###   ##  #  #", 
     "#   ###  #  #", 
     "# ####   ###  #", 
     "# ## # o    #", 
     "# o # # o ### ### #", 
     "# # #    #", 
     "############################"]; 

//need to add wall.scource = and grass.source = 
var wall = new Image(); 
var grass = new Image(); 
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en"; 
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z"; 


var posX = 0; 
var posY = 0; 




//for loops set images at given coordinates according to position on mapArray 
for (var y = 0; y < mapArray.length; y++) { 
    for (var x = 0; x < mapArray[0].length; x++) { 

     if (mapArray[y][x] == "") { 
      context.drawImage(grass, (32 * x), (32 * y), 32, 32)//last two are size of image) 
     } 
     if (mapArray[y][x] == "#") { 
      context.drawImage(wall, (32 * x), (32 * y), 32, 32)//last two are size of image) 
     } 
} 
} 

// Here you've rendered the static content and you want to save the state of the canvas in a backup at this point: 

// create backing canvas 
var backCanvas = document.createElement('canvas'); 
backCanvas.width = canvas.width; 
backCanvas.height = canvas.height; 
var backCtx = backCanvas.getContext('2d'); 

// save main canvas contents 
backCtx.drawImage(canvas, 0,0); 

context.rect(posX, posY, 32, 32) 
context.stroke();//traces path, might not need this 


//moves character 
function move(e) { 

    canvas.width = canvas.width;//clears the board after each move (not really necessary since we'll draw the backCanvas over it...) 

    // Render the backup canvas here 
    context.drawImage(backCanvas, 0,0); 

    //alert(e.keyCode);//gives feedback to what each keyCode is 
    if (e.keyCode == 39) { 
     posX += 5; 
    } 
    if (e.keyCode == 37) { 
     posX -= 5; 
    } 
    if (e.keyCode == 40) { 
     posY += 5; 
    } 
    if (e.keyCode == 38) { 
     posY -= 5; 

    } 
    context.rect(posX, posY, 32, 32) 
    context.stroke(); 
}  
document.onkeydown = move;