Question

我正在尝试使用html5画布和淡入淡出文本。当我做这个时，它永远不会让画布上剩下的东西可见。我希望淡入淡出的文字有效，但没有其他内容出现。我以为我可以使用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

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

然后你必须知道画布上没有任何记忆＆＃39;你画的是什么因此，如果你清除画布，你必须再次绘制所有内容不要对保存/恢复感到困惑：他们在这里保存/恢复绘图上下文，这意味着上下文具有的各种颜色，lineWidth，变换，字体......设置，而不是其实际（像素）内容。

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

＆＃13;

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 + ")"
}

＆＃13;

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

＆＃13;

请注意，如果您不担心数学/罪恶，可以使用简单的振荡器功能简化代码：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: