使用javascript和HTML5画布的游戏应用程序的背景

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等暂停和恢复它