画布渐变表现

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

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);
}

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

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

将渐变缓存到离屏画布，然后使用 drawImage() 在画布上进行绘制：

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

这样就消除了创建和计算梯度的处理。绘制图像基本上就是复制操作（稍微多了一点，但性能很好）。

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;
}

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

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