使用javascript和HTML5 canvas的遊戲應用程序的背景

Question

我正在創建一個遊戲應用程序。我必須不斷地更新背景USIG

ctx.fillStyle = "blue"; 
ctx.fillRect(0, 0, width, height); 

但我希望能有像山景觀，道路，樹木通過傳遞）背景感人的電影。我應該如何實現這一目標？

Answer 1

我建議你有一個在背景層運行的視頻（請參閱HTML5的視頻元素），然後在畫布中使用destination-out和source-over屬性。找到下面的代碼

// Fill canvas using 'destination-out' and alpha at 0.05 
ctx.globalCompositeOperation = 'destination-out'; 
ctx.fillStyle = "rgba(255, 255, 255, 0.05)"; 
ctx.beginPath(); 
ctx.fillRect(0, 0,W,H); 
ctx.fill(); 
// Set the default mode. 
ctx.globalCompositeOperation = 'source-over'; 

這樣你的背景將獨立於遊戲運行。當然你可以暫停和恢復它使用JavaScript中的eventlistners等