画布淡入/淡出功能没有按预期工作

Canvas fade in/out functions not working as expected

本文关键字：工作 功能 淡出 布淡入 淡入      更新时间：2023-09-26

所以我有这些函数来淡出画布，而不是按我期望的方式工作。以下是我目前正在处理的内容:

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告诉我，它甚至没有接近我期望的工作方式。这里出了什么问题?

编辑:似乎有一个无尽的循环，和上下文。globalAlpha正在进入20位有效数字，尽管我没有使用这样的数字。

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);
}
相关文章：