javascript - Canvas 更新问题

Question

<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"> 

<script type="text/javascript">
 window.onload = function() {
var ctx = document.getElementById("ctx").getContext("2d"); 
    function createText(words) {
     var LENGTH = words.length;
     var LOOPS = LENGTH;
     var reader = 0;

     position = 10;
     while( LOOPS > 0) {
     letter = words.substr(reader,1);

     setTimeout(ctx.fillText(letter,position,10),100); 
     position += 6; 
     reader += 1; 
     LOOPS -= 1; 
      }

    }


    createText("Hello, how are you?");      

    }
</script>


</canvas> 

我希望它做的有点像打字动画，在打印每个字母之前它会暂停几分之一秒，但它会同时加载所有字母。我做错了什么？

Answer 1

所以有一些事情让这对你不起作用，因为 setTimeout 你的 ctx.fillText 被立即调用，一旦循环命中它。要停止它，您需要将它包装在 function 中，以便在超时期间调用它。

setTimeout(function(){
    // your logic here.
}, 100);

但是，如果这样做，您将遇到一个常见问题，即您只会收到最后 个字母 due to the way variable scoping works in JavaScript .要解决这个问题，您需要将函数包装在闭包中并将值传递给它。

// loop start
 a++;
 b++;
 setTimeout(
    (function (a,b) {
         return function () {
             // some logic that uses a and b
         }
 })(a, b), 100);
// loop end

发生的最后一件事是您的超时设置为 100.. 所以它仍然会立即发生。这意味着每次超时都会在 100 毫秒后触发，因为创建循环非常快。为了解决这个问题，您需要在某处保存延迟并在循环中增加延迟，以便它们一个接一个地发生。例如第一个延迟 100 毫秒，下一个延迟 200 毫秒，然后是 300 毫秒，等等。

// loop start
 a++;
 b++;
 // Increase the time delay each loop iteration
 timeDelay += 100;

 setTimeout(
    (function (a,b) {
         return function () {
             // some logic that uses a and b
         }
 })(a, b), timeDelay);
// loop end

完整的工作代码和演示

Live Demo

 window.onload = function () {
     var ctx = document.getElementById("ctx").getContext("2d");

     function createText(words) {
         var LENGTH = words.length;
         var LOOPS = LENGTH;
         var reader = 0;
         var timeDelay = 100;

         position = 10;

         while (LOOPS > 0) {
             letter = words.substr(reader, 1);

             setTimeout((function (letter, position) {
                 return function () {
                     ctx.fillText(letter, position, 10);
                 }
             })(letter, position), timeDelay);

             position += 6;
             reader += 1;
             LOOPS -= 1;
             timeDelay += 100;
         }

     }

     createText("Hello, how are you?");

 }