HTML5 Canvas 淡入淡出文本，不起作用

Question

我想弄乱 html5 canvas 和淡入淡出文本。当我做这个时，它永远不会让 canvas 上的其余内容可见。我想要淡入和淡出的文本有效，但没有显示任何其他内容。我以为我可以使用 ctx.save() 和 ctx.restore() 来解决这个问题，但无济于事，我一无所知。

这是我使用的代码。

<html>
   <head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">


    var canvas, ctx, step = 50, steps = 255;
    var delay = 20;
    var rgbstep = 50;


    function init() {
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");

        // Fire text
        ctx.font = "Bold 160pt Trebuchet MS";
        ctx.fillStyle = "#8DC63F";
        ctx.fillText('F', 350, 195);
        ctx.font = "Bold 120pt Trebuchet MS";
        ctx.fillStyle = "#8DC63F";
        ctx.fillText('IRE', 469, 195);


        //Fly text
        ctx.font = "Bold 160pt Trebuchet MS";
        ctx.fillStyle = "#A7A9AC";
        ctx.fillText('F', 705, 195);
        ctx.font = "Bold 120pt Trebuchet MS";
        ctx.fillStyle = "#A7A9AC";
        ctx.fillText('LY', 825, 195);
        ctx.save();

        var img = new Image();
        img.src = 'logo/firefly.png';

        img.onload = function() {
            ctx.drawImage(img, 0, 0);
        };

        Textfadeup();
    }

    function Textfadeup() {
        rgbstep++;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = "43pt Tahoma";
        ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")";
        ctx.fillText('innovative technologies', 379, 255);
        ctx.restore();
        if (rgbstep < 255) {
            var t = setTimeout('Textfadeup()', 10);
        }
        if (rgbstep == 255) {
            Textfadedown();
        }
    }

    function Textfadedown() {
        rgbstep = rgbstep-1;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = "43pt Tahoma";
        ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")";
        ctx.fillText('innovative technologies', 379, 255);
        ctx.restore();
        if (rgbstep > 80) {
            var t = setTimeout('Textfadedown()', 10);
        }
        if (rgbstep == 80) {
            Textfadeup();
        }
    }

    </script>
</head>

<body onload="init();">
    <canvas id="myCanvas" width="1500" height="500">

</canvas>


   </body>
</html>

任何我能算出的代码片段，或指出我犯错的地方都会有所帮助。

Answer 1

您的代码中存在一些问题：
• 首先，重用代码以提高可读性/减少错误/ ...
• 使用驼峰式大小写。
• 确保在启动您的应用程序之前加载任何图像。

那你要知道canvas跟你画的'memory'不一样。所以如果你clearRect a canvas，你必须重新绘制所有东西。
不要被 save/restore 弄糊涂了：它们在这里 save/restore 绘图上下文，意思是各种颜色、线宽、变换、字体...上下文具有的设置，而不是它的实际（像素））内容。

以下代码显示了如何组织代码以获得所需的结果。

var canvas, ctx, step = 50,
  steps = 255;
var delay = 10;
var rgbstep = 50;

var img = new Image();
img.src = 'http://i.stack.imgur.com/Eisr7.png';
img.onload = init;

var fonts = ['Trebuchet MS', 'Tahoma'];

function init() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  textFadeUp();
}

function drawFire() {
  drawText('F', 350, 195, "#8DC63F", 0, 160, 'Bold');
  drawText('IRE', 469, 195, "#8DC63F", 0, 120, 'Bold');
}

function drawFly() {
  drawText('F', 705, 195, "#A7A9AC", 0, 160, 'Bold');
  drawText('ly', 825, 195, "#A7A9AC", 0, 120, 'Bold');
}

function drawImage() {
  ctx.drawImage(img, 100, 100);
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawScene() {
  clearCanvas();

  drawImage();

  drawFire();
  drawFly();

  drawText('innovative technologies', 379, 255, getGray(rgbstep), 1, 43);

}

function textFadeUp() {
  rgbstep++;

  drawScene();

  if (rgbstep < 255) {
    var t = setTimeout(textFadeUp, delay);
  }
  if (rgbstep == 255) {
    textFadeDown();
  }
}

function textFadeDown() {
  rgbstep = rgbstep - 1;

  drawScene();

  if (rgbstep > 80) {
    var t = setTimeout(textFadeDown, delay);
  }
  if (rgbstep == 80) {
    textFadeUp();
  }
}

// --------------------------------------

function drawText(txt, x, y, color, whichFont, fontSize, fontStrength) {
  fontStrength = fontStrength || '';
  ctx.font = fontStrength + ' ' + fontSize + 'pt ' + fonts[whichFont];
  ctx.fillStyle = color;
  ctx.fillText(txt, x, y);
}

function getGray(grayLevel) {
  return "rgb(" + grayLevel + "," + grayLevel + "," + grayLevel + ")"
}

<canvas id="myCanvas" width="1500" height="500">

请注意，如果您不害怕 math/sin，您可以使用一个简单的振荡器函数来简化您的代码：

function osc(min, max, freq ) {
    return min + 0.5*(max-min)*(1 + Math.sin(2*Math.PI*freq*Date.now()/1000));
}

var canvas, ctx;

var img = new Image();
img.src = 'http://i.stack.imgur.com/Eisr7.png';
img.onload = init;

var fonts = ['Trebuchet MS', 'Tahoma'];

function init() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  setInterval(drawScene, 20);
}

function drawFire() {
  drawText('F', 350, 195, "#8DC63F", 0, 160, 'Bold');
  drawText('IRE', 469, 195, "#8DC63F", 0, 120, 'Bold');
}

function drawFly() {
  drawText('F', 705, 195, "#A7A9AC", 0, 160, 'Bold');
  drawText('ly', 825, 195, "#A7A9AC", 0, 120, 'Bold');
}

function draw_inn_tech() {
  var rgbStep = Math.floor(osc(80, 255, 0.5));
  drawText('innovative technologies', 379, 255, getGray(rgbStep), 1, 43);
}

function drawImage() {
  ctx.drawImage(img, 100, 100);
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawScene() {
  clearCanvas();
  drawImage();
  drawFire();
  drawFly();
  draw_inn_tech();
}

// --------------------------------------

function drawText(txt, x, y, color, whichFont, fontSize, fontStrength) {
  fontStrength = fontStrength || '';
  ctx.font = fontStrength + ' ' + fontSize + 'pt ' + fonts[whichFont];
  ctx.fillStyle = color;
  ctx.fillText(txt, x, y);
}

function getGray(grayLevel) {
  return "rgb(" + grayLevel + "," + grayLevel + "," + grayLevel + ")"
}

function osc(min, max, freq) {
  return min + 0.5 * (max - min) * (1 + Math.sin(2 * Math.PI * freq * Date.now() / 1000));
}

<canvas id="myCanvas" width="1500" height="500">

HTML5 Canvas 淡入淡出文本，不起作用

HTML5 Canvas Fade in and fade out text, not working

html

html5-canvas