javascript - 利用 HTML5 中的前景和背景 Canvas

Question

现在我有一个大 Canvas ，上面绘制了所有内容。 Canvas 直接在 JS 文件中创建:

 var canvas = document.createElement ("canvas");
 var ctx = canvas.getContext("2d");
 canvas.width = document.width;
 canvas.height = document.height;
 document.body.appendChild(canvas);

它根据浏览器窗口调整自己的大小。

我将渐变背景与所有其他元素一起绘制到一个 Canvas 上。背景颜色在每次游戏模式更改时随机生成(例如，当主菜单切换到游戏时，然后是关卡结束屏幕等)。目前我正在像这样将它们绘制到 Canvas 上:

var grad1 = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, 500);
grad1.addColorStop(0, bgGradStop1);
grad1.addColorStop(1, bgGradStop2);

ctx.fillStyle = grad1;
ctx.fillRect(0, 0, canvas.width, canvas.height);

我读过很多次，有一个单独的 Canvas 作为背景可以提高性能。我需要做些什么才能使它有效，或者我可以简单地创建另一个 Canvas 并使用完全相同的代码绘制背景，只是修改为使用另一个 Canvas ，如下所示:

var grad1 = ctxBg.createRadialGradient(canvasBg.width / 2, canvasBg.height / 2, 0, canvasBg.width / 2, canvasBg.height / 2, 500);
grad1.addColorStop(0, bgGradStop1);
grad1.addColorStop(1, bgGradStop2);

ctxBg.fillStyle = grad1;
ctxBg.fillRect(0, 0, canvasBg.width, canvasBg.height);

或者获得任何性能优势是否涉及使用第二个 Canvas 的一些完全不同的方法？

此外，如果真的只是在不同的 Canvas 上做完全相同的事情，那么在其他实体移动时将 HUD 文本移动到它自己的 Canvas 上是否也有任何好处？甚至将各种类型的实体分离到它们自己的 Canvas 上？多个 Canvas 的好处实际延伸到多远？

Answer 1

Or does getting any performance benefit involve some totally different method of using the second canvas?

虽然我认为在您的情况下不需要第二个 Canvas ，但您已经有了正确的想法。

从性能 Angular 来看，重要的是您不想一直构建和填充渐变。如果您在绘制循环中所做的只是:

ctx.fillStyle = grad1;
ctx.fillRect(0, 0, canvas.width, canvas.height);

那你在这里应该很膨胀吧。我不认为在背景中有第二个 Canvas 在那之后对你有多大帮助。可能会有轻微的性能提升，但如果不需要，谁愿意跟踪额外的 DOM 元素？

测试在主 Canvas 后面有第二个 Canvas 的性能有点困难，但不是在 DOM 中有两个大 Canvas ，一个类似的替代方法是在内存 Canvas 上绘制渐变并始终调用 ctx.drawImage(inMemCan, 0, 0); 而不是设置渐变并绘制它。众所周知，绘制图像的速度很快，并且以这种方式使用两个 Canvas 可能接近您对两个页面 Canvas 的预期速度(希望它会更快)。

因此我们可以测试从内存 Canvas 到主 Canvas 绘制渐变与绘制普通的旧渐变。这是一个使用大 Canvas 的简单测试:

http://jsperf.com/gradient-vs-immemcan

他们看起来相当平等。如果这件事是您背景中唯一的事情，我不会担心。可能有更大的性能鱼供您先煎。

当相对复杂的背景很少但独立于前景更新时，我会保留多个 Canvas 的好处。如果您的背景是用 30 个渐变和一些路径制作的，那么使用第二个 Canvas (或内存中的 Canvas 来缓存图像)会给您带来相当大的提升。

---

It resizes itself to the browser window.

提醒一下 full screen API如果你想在未来研究它，它在 webkit 和 firefox 中工作得很好。