为什么我的地图每当我的精灵移动时都会消失？

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;