美好的一天，程序员：
我正在寻找从数组中将一系列字符串打印到画布上的方法。目前，它不清除画布和所有打印在单次迭代的文本。
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固定了时间。仍然需要清除画布的帮助。
谢谢，
有限责任公司
您的问题是您的循环一次调用了所有这些超时，而没有延迟调用。相反，您需要一个时间间隔，然后在完成数组操作后将其清除（我从中得到了一些启发：setTimeout位于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的链接
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句