Question

现在我有一个大画布，可以绘制所有内容。画布直接在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文本移动到自己的画布上会有什么好处吗？甚至将各种类型的实体分隔到自己的画布上？多幅画布的好处到底有多远？

Answer 1

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

你对如何做到这一点有正确的想法，虽然我不认为在你的情况下需要第二个画布。

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

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

然后你应该在这里相当膨胀。我不认为在后台有第二个画布会对你有所帮助。可能会有轻微的性能提升，但是如果您不需要，那么谁想要跟踪其他DOM元素呢？

测试在主视图后面有第二个画布的性能有点难度，但是在DOM中没有两个大画布，一个类似的替代方法是将渐变绘制为内存中的画布并始终调用{{1而不是设置渐变和绘制它。已知绘图图像速度很快，并且使用两个画布这种方式可能接近两个页面画布所期望的速度（并且希望它会更快）。

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

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

它们似乎相当平等。如果这一件事是你背景中唯一的事我不会担心。你可能有更大的性能鱼首先炒。

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

它会将自身调整为浏览器窗口。

请注意，full screen API在webkit和firefox中运行良好，如果你想在将来查看它。

利用HTML5中的前景和背景画布

1 个答案: