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

现在我有一块大画布，上面画着所有的东西。画布直接在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);

我读过很多次，有一个单独的画布作为背景对性能更好。我是否需要做一些具体的事情来提高效果，或者我可以简单地创建另一个画布，并使用相同的代码绘制背景，只需修改以使用其他画布，如：

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文本移动到自己的画布上会有任何好处吗？甚至将各种类型的实体分离到它们自己的画布上？多张画布的好处到底有多大

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

你对如何做这件事有正确的想法，尽管我认为在你的情况下不需要第二张画布

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

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

那你在这里应该很好。我不认为有第二块画布作为背景会对你有多大帮助。可能会有一点性能提升，但如果不需要的话，谁愿意跟踪其他DOM元素呢

测试在主画布后面有第二个画布的性能有点困难，但是与其在DOM中有两个大画布，一个类似的替代方法是在内存画布中绘制渐变，并始终调用

ctx.drawImage（inMemCan，0，0）而不是设置渐变并绘制渐变。众所周知，绘制图像的速度很快，以这种方式使用两张画布可能接近您期望的两张页面画布的速度（希望速度更快）

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


他们看起来很平等。如果这件事是你背景中唯一的事，我就不会担心了。可能有更大的性能鱼要你先炒

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


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

提醒您，如果您将来想了解它，它在webkit和firefox中运行得非常好。
非常感谢您的解释，非常感谢！现在我正在绘制：背景，游戏屏幕和HUD的文本，以及3种不同类型实体的多个实例。出于某种原因，我认为如果每次更新某个内容（如屏幕上的实体移动）时都在一个画布上绘制，那么整个内容都会从头开始重新绘制（包括不变的元素），然而，如果我把它放在不同的画布上，它将独立于其他元素，因此目标将是在不同的画布上保持一切静态。我怀疑我可能误解了什么！你或多或少是对的，但是只画一个东西（一个梯度）并不是什么大不了的事，即使你每次都画。您可能需要担心更大的性能相关问题（尽管可能不是！）