0

そのため、期待どおりに機能しないキャンバスをフェードインおよびフェードアウトするこれらの関数があります。現時点で私が取り組んでいるものは次のとおりです。

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

私の意図は、0.5 秒のフェードにすることでした。私が最終的に得たのは、それが一瞬のうちに点滅したり消えたりすることでした. 最初の関数の console.log を見ると、期待どおりの動作にはほど遠いことがわかります。ここで何がうまくいかなかったのですか？

編集:無限ループが進行しているようで、context.globalAlpha は有効数字 20 桁になっていますが、そのような数字は使用していません。

4

1 に答える 1

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);
}
于 2013-01-06T07:44:20.720 に答える