html - Canvas 渐变性能

Question

我目前正在使用 Canvas 编写一个小游戏。对于游戏，我需要某种雾来隐藏 map 的大部分区域，并且玩家周围只有一小部分区域应该可见。因此，我使用第二个 Canvas 覆盖游戏发生的地方并用渐变(从透明到黑色)填充它:

function drawFog(){
fogc.clearRect(0,0,700,600);
// Create gradient
var grd=fogc.createRadialGradient(player.getPosX(),player.getPosY(),0,player.getPosX(),player.getPosY(),100);
grd.addColorStop(0,"rgba(50,50,50,0)");
grd.addColorStop(1,"black");

// Fill with gradient
fogc.fillStyle=grd;
fogc.fillRect(0,0,700,600);
}

不幸的是，这会导致巨大的性能问题，因为它会为每一帧重新绘制。

我想请问是否有更好的解决方案可以达到相同的效果，性能更好。

Answer 1

将渐变缓存到离屏 Canvas ，然后使用 drawImage() 在 Canvas 中绘制:

• 创建一个雾大小的离屏 Canvas
• 绘制渐变
• 当您需要雾时，使用屏幕外的 Canvas 作为图像。

这样就消除了创建和计算梯度的过程。绘制图像基本上是一个复制操作(有点多，但是性能很好)。

function createFog(player) {

    // Create off-screen canvas and gradient
    var fogCanvas = document.createElement('canvas'),
        ctx = fogCanvas.getContext('2d'),
        grd = fogc.createRadialGradient(player.getPosX(),
                                        player.getPosY(),
                                        0,player.getPosX(),
                                        player.getPosY(),100);

    fogCanvas.width = 700;
    fogCanvas.height = 700;

    grd.addColorStop(0,"rgba(50,50,50,0)");
    grd.addColorStop(1,"black");

    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(0,0,700,600);

    return fogCanvas;
}

现在您可以简单地在从上述函数返回的 Canvas 中绘制，而不是每次都创建渐变:

var fog = createFog(player);
ctx.drawImage(fog, x, y);