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

Canvas淡入/淡出功能无法按预期工作

1 个答案: