Html 画布渐变性能

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

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

---

我想问一下，是否有更好的解决方案可以以更好的性能实现相同的效果。

将渐变缓存到屏幕外画布，然后使用drawImage（）在画布中绘制：

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

这样就消除了创建和计算渐变的过程。绘制图像基本上是一个复制操作（还有一点，但性能非常好）

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

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

---

如果只在200x200区域填充渐变，会有帮助吗？你可以用黑色填充整个画布（或者只是用黑色填充上一个渐变部分），擦除渐变部分，然后在上面绘制渐变。实际上我只是尝试了一下，但没有任何效果，我认为问题在于渐变本身。使用额外的不可见200x200画布来“缓存”渐变如何？然后你就可以

drawImage

，我想应该更快。这样就行了。性能不如没有雾的时候好（Firefox使用20%的CPU加雾，而不是5%的CPU不加雾），但动画现在是流畅的。谢谢

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