Question

美好的一天，程序员：

我希望将一系列字符串从数组打印到画布上。目前，它不会清除画布和在一次迭代中打印所有文本。

var test1 = ["This","is","a","test","to","see","if","it","really","works"];

function printWord(i){
    setTimeout( function(){ ctx.fillText(test1[i], 150, 90) }, 1000 ) }

function clearScreen(){
    ctx.clearRect(0, 0, 300, 100);
}

function playText(){
    for(var i = 0; i < test1.length; i++){
        clearScreen;
        printWord(i);
    };
}
playText();

这是JSFiddle。更新链接，感谢Bigood修复时机。清理画布时仍需要帮助。

谢谢，

LLCreatini

Answer 1

您的脚本不会在一次迭代中打印所有内容：实际上，超时的回调会按照您的要求调用多次（设置断点来验证）。

这里的主要问题是您在同一时间启动所有超时（延迟几毫秒），因此它们都会同时触发。

要解决此问题，您可以使用index为每个单词设置不同的超时：

setTimeout( function(){ 
    ctx.fillText(test1[index], 150, 91);
}, 200 * index );  //Multiply by index, it'll trigger at 200ms, 400ms, 600ms...

请参阅this fiddle进行演示！

修改

如果要在每个单词之间清除屏幕，请在超时时调用方法clearScreen，如下所示：

setTimeout( function(){ 
    clearScreen();
    ctx.fillText(test1[index], 150, 91);
}, 200 * index );

Here is a demonstration of this.

Answer 2

你的问题是你的循环一次调用所有超时，而不是延迟通话。相反，你需要一个间隔，然后在你完成数组时清除它（我从中得到了一些灵感：setTimeout inside for loop）。这是一个修改过的示例，使用与我发布的链接相同的方法：

var test1 = ["This","is","a","test","to","see","if","it","really","works."];

var c = document.getElementById("screen"); //Setup screen.
var ctx = c.getContext("2d");   
ctx.font = "normal 42px Arial";
ctx.textAlign= "center";
var i = 0;

function clearScreen(){
    ctx.clearRect(0, 0, 300, 100);
}

var timer = setInterval(function(){
    clearScreen();
    ctx.fillText(test1[i], 150, 91);
    i++; 
    if(i >= test1.length) {
        clearInterval(timer);
    }
}, 200);

timer();

这是指向工作JSFiddle

的链接

Answer 3

您不需要使用for循环，数组的索引可以通过setTimeout()来处理。

function printWord(index){
    setTimeout( function(){ 
        if(index < test1.length){
            ctx.fillText(test1[index], 150, 91);
            index++
            printWord(index);        
        }

    }, 1000);
}

function playText(){
   printWord(0);
}
playText();

DEMO

Answer 4

您基本上有两个不同的问题：在每个文本之间添加延迟并清除画布

每篇文字之间的延迟

setTimeout与大多数其他语言一样没有阻止; setTimeout语句之后的代码将在超时发生之前运行。

您的代码基本上连续10次运行printWord，没有任何延迟，使用不同的索引，这将导致您的setTimeout函数同时运行。

如果您需要延迟，则无法使用常规for循环。您要么将延迟乘以i，要么这样做（我觉得看起来更干净）：

var i = 0;
function playNextText(){
    setTimeout(function () {
        printWord(i);

        i++;
        if(i < test1.length)
            //There are more texts left
            playNextText();
    }, 200);
}
playNextText();

清除绘图区

你的另一个问题很简单;

context.clearRect(x, y, width, height);

一个完整的例子：http://jsfiddle.net/EUz7T/2/

使用带有Canvas的setTimeout从Array打印文本

4 个答案:

修改