vẽ lại canvas html5 mà không nhấp nháy

Question

Tôi đã một màn hình được vẽ lại mỗi 25ms, và hình ảnh được nhấp nháy, đây là mã của tôi

   var FRAME_RATE = 40; 
       var intervalTime = 1000/FRAME_RATE; 
       gameLoop(); 

       function gameLoop(){ 
        context.clearRect(0, 0, 640, 640); 
        renderMap(); 
        window.setTimeout(gameLoop, intervalTime); 
       } 

và đây là renderMap() chức năng

function renderMap(){ 
        var startX = playerX - (screenW/2); 
        var startY = playerY - (screenH/2); 

        maxX = playerX + (screenW/2); 
        maxY = playerY + (screenH/2); 
        $.getJSON('mapa3.json', function(json){ 
         for (x = startX; x < maxX; x=x+32){ 
          for (y = startY; y < maxY; y=y+32){ 
           intTile = json.layers[0].data[((y/32)* 100) + (x/32)]; 
           context.putImageData(getTile(intTile - 1), x - startX, y - startY); 
          } 
         } 
        }); 

        var imgCharacter = new Image(); 
        imgCharacter.src = 'char.png'; 

        var posX = (screenW - imgCharacter.width)/2; 
        var posY = (screenH - imgCharacter.height)/2; 
        imgCharacter.onload = function(){context.drawImage(imgCharacter, posX, posY)}  
       } 

gì thay đổi tôi có cần thực hiện mã để ngừng nhấp nháy không?

Answer 1

Tôi tin rằng đó là vì bạn đang tải hình ảnh mỗi lần lặp lại. Hãy thử đặt var imgCharacter..., dòng sau, và onload chức năng của hình ảnh bên ngoài của renderMap vì vậy nó chỉ được chạy một lần

var imgCharacter = new Image();  
imgCharacter.onload = function() { 
    renderMap(); 
} 
imgCharacter.src = 'char.png'; 

function renderMap() { 
    var startX = playerX - (screenW/2); 
    var startY = playerY - (screenH/2); 

    maxX = playerX + (screenW/2); 
    maxY = playerY + (screenH/2); 
    $.getJSON('mapa3.json', function (json) { 
     for (x = startX; x < maxX; x = x + 32) { 
      for (y = startY; y < maxY; y = y + 32) { 
       intTile = json.layers[0].data[((y/32) * 100) + (x/32)]; 
       context.putImageData(getTile(intTile - 1), x - startX, y - startY); 
      } 
     } 
    }); 

    var posX = (screenW - imgCharacter.width)/2; 
    var posY = (screenH - imgCharacter.height)/2; 

    context.drawImage(imgCharacter, posX, posY) 
} 

Cảm ơn bạn marke đã cho tôi biết các onload chức năng cũng cần phải đi ra ngoài renderMap, tôi bỏ qua đây là lần đầu tiên

Answer 2

Tải tất cả hình ảnh và dữ liệu khác trước khi vẽ và lưu trữ chúng bên trong mảng.
Sử dụng tốt hơn requestAnimationFrame.
Hãy nhớ rằng việc nhận JSON (hoặc dữ liệu khác) có thể mất chút thời gian.