Вызовите функции Javascript подряд

Question

Цель: Я пытаюсь создать слегка динамичную страницу, анимированную с помощью основных анимаций холста, используя setInterval ().Когда пользователь впервые заходит на страницу, отображается фоновое изображение.Затем поверх него появляется холст, и постепенно непрозрачность увеличивается до совершенно непрозрачного черного.После того, как холст станет черным, я хочу, чтобы над моим черным холстом появился белый текст.

Проблема: Переход холста и текст отображаются одновременно.

Iисследовали эту проблему, и здесь, кажется, существует множество решений.Я уже пробовал много вариантов в моем собственном коде.Когда-то у меня было две отдельные функции.В другой раз я попытался вызвать функцию, которая затем вызывала обе функции по очереди.Я прочитал блог о парне, который создал массив функций, а затем перебрал функции.Эта идея интригует, но мне интересно, есть ли здесь что-то гораздо более простое, которого будет достаточно.

Я работал с ним над jsfiddle, но в данный момент сайт не сотрудничает.Итак, вот что у меня сейчас:

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

Мысли?

Answer 1

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

Вы выполняете функции прямо тогда и там, когда вы просто хотите передать их вокруг.Избавьтесь от ():

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

Answer 2

Вот довольно простая настройка (возможно, она немного сложна для этой простой задачи, но вы можете повторно использовать шаблон и / или абстрагировать его, если вам нужно больше эффектов)

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

Когда fadeBlack завершается, он вызывает callback, который - в данном случае - рисует текст

Answer 3

У вас две проблемы.1. как уже упоминал другой комментатор, ваш вызов setTimeout был неверным 2. Даже если вы исправите вызов setTimeout, интервал fadeCanvas () немедленно перезапишет любой отображаемый текст.чтобы проверить на 100% непрозрачность в fadeCanvas (), и как только эта цель будет достигнута, очистите интервал и вызовите 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) 
}