javascript - 画布淡入/淡出功能无法按预期工作

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