Question

目标：我正在尝试使用setInterval（）创建一个使用基本画布动画制作动画的略微动态的页面。当用户首次进入该页面时，将显示背景图像。然后在它上面出现一个画布，渐渐地不透明度增加到完全不透明的黑色。画布为黑色后，我希望在黑色画布上显示白色文字。

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

我已经研究过这个问题，这里似乎有一大堆解决方案。我已经在自己的代码中尝试了很多变化。一旦我有两个独立的功能。另一次我尝试调用一个函数，然后连续调用这两个函数。我读了一篇关于创建一系列函数的人的博客，然后循环使用这些函数。这个想法很吸引人，但我想知道这里是否有更简单的东西就足够了。

我在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

你有两个问题。 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) 
}

Answer 3

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

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，在这种情况下，会调用文本

连续调用Javascript函数

3 个答案: