现在我有一个大画布,所有的东西都被画出来了。画布直接在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 文本移动到自己的画布是否有任何好处?甚至将各种类型的实体分离到自己的画布上?多幅画布的好处实际上能延伸多远?