防止畫布在重繪時閃爍？

Question

我目前正在做這樣的重繪：

這工作正常，除了在一段時間後字符精靈會閃爍。這足以成爲一個非常大的煩惱。我應該如何更有效地做到這一點？我也嘗試改變重繪頻率。更高的頻率加劇了這個問題，而由於圖形原因，低頻率不夠快。

init() 
{ 
//stuff 
    return setInterval(draw,100); 
} 

function draw() 
{ 
    drawBackground(); 
    character.draw(); //draws a sprite 
} 

//this function is called when character is created 
Character.prototype.setImage = function() 
{ 
    this.avatar= new Image(); 
    this.avatar.onload=function(){ 
      this.imageLoaded=true; 
    }; 
    this.avatar.src='/img/sprite.png'; 
} 

Character.prototype.draw=function(ctx) 
{ 
    var imageW=this.imageW; 
    var imageH=this.imageH; 

    ctx.drawImage(avatar,20,20,imageW,imageH); 

} 

Answer 1

爲什麼每次在繪製背景時都嘗試下載背景圖片？也許下面的代碼是更好：

var bg=null,ctxDrawInterval=-1; 
init() { 
    //stuff 
    bg=new Image(); 
    bg.onload=function(){ 
    ctx.drawImage(bg,0,0,GAME_WIDTH,GAME_HEIGHT); 
    ctxDrawInterval=setInterval(draw,100); 
    } 
    //bg.onerror=function(){ 
    // what if error downloading? 
    //} 
    bg.src='img/background.png'; // must be placed after bg.onload 
} 

function draw() { 
    drawBackground(); 
    character.draw(); //draws a sprite 
} 

function drawBackground() { 
    ctx.drawImage(bg,0,0,GAME_WIDTH,GAME_HEIGHT); 
}