1

现在我有一个大画布，所有的东西都被画出来了。画布直接在JS文件中创建：

 var canvas = document.createElement ("canvas");
 var ctx = canvas.getContext("2d");
 canvas.width = document.width;
 canvas.height = document.height;
 document.body.appendChild(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);

我读了很多次，有一个单独的背景画布对性能更好。我需要做些什么才能使其有效吗？或者我可以简单地创建另一个画布并使用相同的确切代码绘制背景，仅修改为使用另一个画布，如下所示：

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);

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

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

4

1 回答 1

2

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

您对如何做到这一点有正确的想法，尽管我认为您的情况不需要第二张画布。

从性能的角度来看，重要的是您不希望继续构建和填充渐变。如果您在绘制循环中所做的一切是：

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

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

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

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

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

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

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

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

只是提醒一下，如果您将来想研究它，全屏 API在 webkit 和 firefox 中运行良好。

于 2012-08-16T20:55:08.457 回答