畫布漸變表現

我目前正在使用畫布編程一個小遊戲。對於遊戲，我需要一些可以隱藏大部分地圖的霧，並且只能在玩家周圍看到一小塊區域。 Therfor我用一個第二畫布疊加一個在遊戲的故事發生，並用漸變填充（從透明到黑色）：畫布漸變表現

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

不幸的是，這是造成巨大的性能比較的問題，因爲這將重繪每幀。

我想問一下是否有更好的解決方案可以獲得同樣的效果，並且性能更好。

來源

2014-02-19 Danmoreng

如果你只填充漸變200x200的區域，這將有助於？您可以用黑色填充整個畫布（或者只填充先前的漸變部分，用黑色填充），擦除漸變部分，然後繪製漸變部分。 – Passerby

其實我只是試過，它根本沒有效果，我認爲問題是漸變本身。 – Danmoreng

如何使用其他不可見的200x200畫布「緩存」漸變？那麼你可以只畫'圖像'，我認爲它應該更快。 – Passerby

緩存然後梯度到離屏帆布與的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);

來源

2014-02-19 20:24:29 K3N

畫布漸變表現

回答

相關問題