连续调用Javascript函数

目标：我正在尝试使用

setInterval（）

创建一个带有基本画布动画的稍微动态的页面。当用户第一次进入页面时，会显示一个背景图像。然后画布出现在它上面，不透明度逐渐增加到完全不透明的黑色。画布为黑色后，我希望白色文本显示在黑色画布上

问题：画布转换和文本同时出现

我研究过这个问题，这里似乎有一整套解决方案。我已经在自己的代码中尝试了许多变体。曾经我有两个独立的功能。另一次，我尝试调用一个函数，然后依次调用这两个函数。我读了一篇关于创建函数数组，然后循环函数的博客。这个想法很有趣，但我想知道这里是否有更简单的东西可以满足

我在JSFIDLE上与它合作，但该网站目前不合作。下面是我现在的情况：

<div id="container">
    <a href="#" id="LftButton"><img src="imageFiles/arrowButtonLft.png" /></a>
    <a href="#" id="RtButton"><img src="imageFiles/arrowButtonRt.png" /></a>
    <div id="canvasWrapper">
        <canvas id="myCanvas" width="675" height="600">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
        <script src="aboutMeScript.js" type="text/javascript"></script>
    </div>
</div>

#myCanvas{
width:675px;
height:600px;
float:left;
}
#canvasWrapper{
width:675px;
height:600px;
margin:auto;
}
#RtButton{
    float:right;
margin-right:34px;
}
#LftButton{
    float:left;
margin-left:34px;
}
#RtButton, #LftButton{
margin-top:200px;
}

var drawing = document.getElementById("myCanvas");
//Initialize drawing context
var ctx = drawing.getContext("2d");
//Canvas commands follow
var alphaCounter = .033;

function fadeCanvas(){
ctx.fillStyle = "rgba(0,0,0," + alphaCounter + ")";
ctx.fillRect(0,0,675,600);
alphaCounter += .03;
}
function display411(){
ctx.fillStyle=('#fff');
ctx.font='bold 14px + "Courier New, Courier, monospace" +';
ctx.fillText('Click the arrow keys forward to reveal the bigger picture.', 100,100);
}
function init(){
setInterval(fadeCanvas,100);
ctx.save();
setTimeout(display411(), 5000)
}
window.onload = init();

您的浏览器不支持画布

#我的画布{
宽度：675px；
高度：600px；
浮动：左；
}
#画布{
宽度：675px；
高度：600px；
保证金：自动；
}
#RtButton{
浮动：对；
右边距：34px；
}
#LFT按钮{
浮动：左；
左边距：34px；
}
#RtButton，#LftButton{
利润上限：200px；
}
var drawing=document.getElementById（“myCanvas”）；
//初始化图形上下文
var ctx=drawing.getContext（“2d”）；
//画布命令如下
var alphaCounter=.033；
函数fadeCanvas（）{
ctx.fillStyle=“rgba（0,0,0，“+alphaCounter+””）；
ctx.fillRect(0,0675600);；
字母计数器+=.03；
}
函数display411（）{
ctx.fillStyle=（“#fff”）；
ctx.font='bold 14px+“Courier New，Courier，monospace”+；
ctx.fillText（'单击向前箭头键以显示更大的图片'，100100）；
}
函数init（）{
设置间隔（fadeCanvas，100）；
ctx.save（）；
设置超时（显示411（），5000）
}
window.onload=init（）；

想法

setTimeout(display411(), 5000)
window.onload = init();

当您只想传递函数时，您直接执行函数。摆脱

（）

：

你有两个问题。 1.正如另一位评论员所提到的，您的setTimeout调用不正确 2.即使更正了setTimeout调用，fadeCanvas（）间隔也会立即覆盖显示的任何文本

在我看来，最好的方法是在fadeCanvas（）中测试100%的不透明度，一旦达到这个目标，清除间隔并直接调用display411（）

function fadeCanvas(){
    ctx.fillStyle = "rgba(0,0,0," + alphaCounter + ")";
    ctx.fillRect(0,0,675,600);
    alphaCounter += .03;
    if (alphaCounter >= 1) {
        clearInterval(fadeToBlack);
        display411();
    }
}

function init(){
    fadeToBlack = setInterval(fadeCanvas,100);
    ctx.save();
    //setTimeout(display411(), 5000) 
}

---

这是一个相当简单的设置（对于这个简单的任务来说可能有点复杂，但是如果需要更多效果，可以重用模式和/或将其抽象）

---

当

fadeBlack

完成时，它调用

回调

，在本例中，它绘制文本

函数数组有什么问题？我还没有尝试过。实际上，我希望有一个更简单的解决方案。在数组中循环相当简单。：）我正在寻找使用数组调用方法的正确语法。Firebug告诉我数组[i]（）不是一种方法。你能给我一个提示去哪里找吗？

function fadeCanvas(){
    ctx.fillStyle = "rgba(0,0,0," + alphaCounter + ")";
    ctx.fillRect(0,0,675,600);
    alphaCounter += .03;
    if (alphaCounter >= 1) {
        clearInterval(fadeToBlack);
        display411();
    }
}

function init(){
    fadeToBlack = setInterval(fadeCanvas,100);
    ctx.save();
    //setTimeout(display411(), 5000) 
}

function fadeBlack(callback) {
  var timer,
      context = getElementById('myCanvas').getContext("2d"),
      opacity = 0;

  function step() {
    opacity += 0.03;
    context.fillStyle "rgba(0,0,0," + opacity + ")";
    context.fillRect(0,0,675,600);
    if( opacity >= 1 ) {
      clearInterval(timer);
      if( typeof callback === "function" ) {
        callback();
      }
    }
  }

  setInterval(step, 100);
}

fadeBlack(function() {
  var context = getElementById('myCanvas').getContext("2d");
  context.fillStyle = '#fff';
  context.font      = 'bold 14px + "Courier New, Courier, monospace" +';
  context.fillText('Click the arrow keys forward to reveal the bigger picture.', 100,100);
});