如何提高 javascript canvas 模式性能

Question

我正在使用 canvas 创建 2D html5 游戏。我目前正在制作非常大的地图（25000 像素 x 25000 像素）。我现在正在尝试为地图形状添加纹理

这是代码：

let snowPattern;
let sandPattern;
let junglePattern;

const jungleTexture = new Image();
jungleTexture.src = "./assets/game/map/jungleTexture.png";

jungleTexture.onload = function() {
    junglePattern = ctx.createPattern(jungleTexture, "repeat");
};


const snowTexture = new Image();
snowTexture.src = "./assets/game/map/snowTexture.png";

snowTexture.onload = function() {
    snowPattern = ctx.createPattern(snowTexture, "repeat");
};


const sandTexture = new Image();
sandTexture.src = "./assets/game/map/sandTexture.png";

sandTexture.onload = function() {
    sandPattern = ctx.createPattern(sandTexture, "repeat");
};



//Function to draw map shapes
function animate() {

    mapX = document.documentElement.clientWidth / 2 - camera.x * zoom;
    mapY = document.documentElement.clientHeight / 2 - camera.y * zoom;


    ctx.setTransform(1, 0, 0, 1, mapX, mapY);

    //Arctic
    if (document.getElementById("3").checked === true) {
        ctx.fillStyle = snowPattern;
    }

    else {
        ctx.fillStyle = "#EFF4F6";
    }

    ctx.fillRect(0, 0, 12500 * zoom, 12500 * zoom);



    //Desert

    if (document.getElementById("3").checked === true) {
        ctx.fillStyle = sandPattern;
    }

    else {
        ctx.fillStyle = "#E5C068";
    }

    ctx.fillRect(12499 * zoom, 0 * zoom, 12500 * zoom, 12500 * zoom);



    //Jungle

    if (document.getElementById("3").checked === true) {
        ctx.fillStyle = junglePattern;
    }

    else {
        ctx.fillStyle = "#0F7F2A";
    }

    ctx.fillRect(0, 12500 * zoom, 25000 * zoom, 12500 * zoom);

    window.requestAnimationFrame(animate);
}

animate();

因此，当我只在形状的背景上添加颜色时，效果很好（恒定 144fps），但是对于图案，我的 fps 会降低到 20。

有没有人知道如何改进性能？

Answer 1

您正在尝试绘制一个巨大的矩形，它会产生预期的开销。这取决于浏览器，但 canvas 有一些限制。当您达到这些限制时，您将遭受性能或崩溃。你可以看到限制here另外画一个巨大的矩形总是会以糟糕的性能结束。

我的建议是：绘制一个较小的矩形（可能比您的游戏屏幕大一点）并将其移动到矩形的末端，就在图案结束之前，再次将其移回。

Answer 2

最后，问题不在于尺寸，即使是 50px x 50px 像素矩形，性能也很糟糕。您需要使用 ctx.beginPath()、ctx.rect、ctx.closePath() 和 ctx.fill() 才能获得正常性能。

如何提高 javascript canvas 模式性能

How to improve javascript canvas pattern performance

javascript

performance

textures

html5-canvas

2d-games