不透明度不應用JavaScript Canvas

我在調用我的方法drawInventory（）時我的鼠標移動，當我按i。不透明度不應用JavaScript Canvas

我設置不透明度在drawInventory方法的開始：

function drawInventory() { 
inventoryCtx.fillStyle = "rgba(0, 0, 0, 0.7)"; 
inventoryCtx.fillRect(10, 10, invWidth-20, invHeight-20); 
}

當我移動鼠標，不透明度爲0.7保持正確的，但是按我後，不透明度降低。

這是我呼籲我的按鍵方法：

function toggleInventory() { 
    if(!showInventory) { 
     showInventory = true; 
     $("#inventoryCanvas").removeClass("hideClass"); 
     drawInventory(); 
     $("#inventoryCanvas").fadeIn(1); 
    } 
    else { 
     $("#inventoryCanvas").fadeOut(100); 
     showInventory = false; 
    } 
};

奇怪的部分是，在第一時間刷新頁面，然後按我的不透明度後是存在的。如果我按兩次，則會返回更高的不透明度（較暗），然後下一次完全黑暗。我不知道爲什麼每次我調用同樣的方法時，它都會失去不透明性。

注意：我試過inventoryCtx.globalAlpha，它沒有改變這個問題。

任何幫助表示讚賞。

來源

2015-01-11 helpmeplease

A canvas對象是一個圖像，最初是完全透明的。

當您使用上下文對其進行繪製時，像素會發生變化以反映您的繪圖。

如果您再次繪製它，您將從當前畫布上的內容開始，這就是您認爲不透明度未應用的原因;原因是它應用了，但是已經不完全透明的像素。

請注意，隱藏和顯示元素不會消除其內容。即使在DOM樹中移動它，每個畫布實例也會記住它的像素值。

爲了保持可重複的結果繪圖時，你需要清除使用

canvas.clearRect(0, 0, canvas.width, canvas.height);

油漆過程的開始，或通過設置與

canvas.width = canvas.width;

畫布對象大小調整畫布有帆布即使尺寸保持完全相同，清除其內容的記載的副作用也是如此。

來源

2015-01-11 10:10:41 6502

太棒了！您提供的那條簡單的代碼行解決了我的整個問題，謝謝。當我移動鼠標時，我正在調整它的大小，這就是爲什麼它不會導致問題出現。 – helpmeplease

不透明度不應用JavaScript Canvas

回答

相關問題