使用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等