畫布淡入/淡出功能不按預期方式工作

Question

因此，我有這些功能可淡入淡出畫布，而這些畫布並不按我期望的方式工作。以下是我與此刻的工作：

function fade_out() 
{ 
    var canvas = document.getElementById("builder"); 
    var context = canvas.getContext('2d'); 

    console.log(context.globalAlpha); 

    context.globalAlpha -= 0.01; 

    if(context.globalAlpha > 0) 
    { 
     setTimeout(fade_out, 5); 
    } 
} 
function fade_in() 
{ 
    var canvas = document.getElementById("builder"); 
    var context = canvas.getContext('2d'); 

    context.globalAlpha += 0.01; 

    if(context.globalAlpha < 1) 
    { 
     setTimeout(fade_in, 5); 
    } 
} 

我的意圖是使之成爲半秒褪色。我最終的結果是隻是一閃而過。第一個函數中的console.log告訴我，它甚至不像我期望的那樣工作。這裏出了什麼問題？

編輯：似乎有一個無限循環去，context.globalAlpha進入20位有效數字，即使我沒有使用這樣的數字。

Answer 1

function fade_in() { 
setTimeout(function() { 
    var cn = document.getElementById("builder"); 
    var ct = cn.getContext('2d').globalAlpha; 
    ct += 0.02; 
    if(ct >= 1) { 
     ct=1; 
    } 
    if (ct < 1) { 
    fade_in(); 
    } 
    else { 
    return false; 
    } 
}, 30); 
} 
function fade_out() { 
setTimeout(function() { 
    var cn = document.getElementById("builder"); 
    var ct = cn.getContext('2d').globalAlpha; 
    ct -= 0.02; 
    if(ct <= 0) { 
     ct=0; 
    } 
    if (ct > 0) { 
    fade_out(); 
    } 
    else { 
    return false; 
    } 
}, 30); 
}