圖像在畫布上閃爍

我已經使用HTML5畫布編寫了一個簡單的圖像滑塊。每個圖像到達屏幕後，將從陣列中移除，導致隨機圖像閃爍。我怎樣才能解決這個問題。圖像在畫布上閃爍

this.animate = function() { 

     this.y += this.speed; 
     this.x = this.xrandom * albumWall.canvas.width - 250; 

      if(this.y > innerHeight) { 
        albumWall.fbImages.splice(albumWall.fbImages.indexOf(this),1); 

        if(albumWall.count==(albumWall.imgArr.length-1)) { 
         albumWall.count=-1; 
        }else{ 
         albumWall.count++; 
         var img = albumWall.imgArr[albumWall.count]; 
         console.log(img) 

         albumWall.fbImages.push(new self.fbImage(albumWall.count, img, img.width, img.height)); 
        } 


       } 

      };

當圖像到達窗口結束時，我正在移除

albumWall.fbImages.splice(albumWall.fbImages.indexOf(this),1);

我認爲這是造成屏幕閃爍，隨機的問題。

來源

2013-10-27 user1184100

就我所知，你是對的。問題在於，通過將動畫中的圖像拉出陣列，您創建了一個框架，其中的另一個圖像（最有可能的位置）不會呈現。這可以固定通過改變上述行來此：

var that = this; 
setTimeout(function() { 
    albumWall.fbImages.splice(albumWall.fbImages.indexOf(that),1); 
}, 0);

簡短的解釋是，超時將使得拼接等到當前動畫功能是觸發之前完成。更多信息可在this helpful answer about using setTimeout to send functions down the stack找到。

Here's your updated fiddle.

來源

2013-10-27 15:14:22 Evan

真棒謝謝！ – user1184100

-1

雖然埃文答案是舊的瀏覽器解決方法，新的瀏覽器支持requestAnimationFrame這是一個更清潔的方式來防止閃爍。每當瀏覽器是準備

通過設置

function yourDrawingFunction() { 

     // your drawing code here 

     window.requestAnimationFrame(yourDrawingFunction); 
}; 

window.requestAnimationFrame(yourDrawingFunction);

幀繪圖代碼將被執行，並且將自動使用雙緩衝（什麼都不會被顯示給用戶的功能已經完成之前）。這也有性能的兩個積極的副作用：

繪畫是因爲它更容易讓他們結合繪製成
的代碼不會被執行自己的網頁渲染管線的調度大多數瀏覽器速度更快當前瀏覽器選項卡不可見時，這會節省用戶計算機上的資源。但這意味着你必須確保你的框架代碼中沒有實際的應用邏輯（但是你不應該那樣）。

大多數瀏覽器已經支持這個功能，但有些只使用它們供應商特定的前綴。這個在您的初始化例程polyfiller片段提供了兼容性，也提供了一個不支持它的瀏覽器回退：

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.msRequestAnimationFrame  || 
      window.oRequestAnimationFrame  || 
      function(callback){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})();

來源

2013-10-28 09:58:12 Philipp

嗨philipp我已經在我的代碼中使用了requestAnimationFrame填充，但我怎麼能通過使用requestAnimationFrame修復錯誤？你可以在小提琴中查看我的代碼，並讓我知道你的想法。 – user1184100

圖像在畫布上閃爍

回答

相關問題