書く効果Javascript

Question

私はこのページのコードを使用しています（https://www.codementor.io/epistemex/how-to-make-a-write-on-effect-using-html5-canvas-and-javascript-only-du107si9v）。文字列を指定すると、文字列を文字で書き出すエフェクトが作成されます。

function setup(txt, fill){ 
      // get 2D context 
     $('body').append("<canvas id = 'newWord' width='1000' height=800></canvas>"); 
     $("#newWord").css("position","absolute"); 
     $("#newWord").css("top","300px"); 
     $("#newWord").css("left","700px"); 
     $("#newWord").css("overflow","visible"); 
     var ctx = document.querySelector("#newWord").getContext("2d"), 

      // dash-length for off-range 
      dashLen = 200, 

     // we'll update this, initialize 
      dashOffset = dashLen, 

     // some arbitrary speed 
      speed = 20, 

     // the text we will draw 
      //txt = "TEST", 

     // start position for x and iterator 
     x = 50, i = 0,z = 0; w = 0; 

     // Comic Sans?? Let's make it useful for something ;) w/ fallbacks 
     ctx.font = "80pt Impact"; 

     // thickness of the line 
     ctx.lineWidth = 10; 


     // to avoid spikes we can join each line with a round joint 
     //ctx.lineJoin = "round"; 

     // increase realism letting background (f.ex. paper) show through 
     ctx.globalAlpha = 1; 

     // some color, lets use a black pencil 
     ctx.strokeStyle = "yellow"; 
     ctx.fillStyle = fill; 

     (function loop() { 
      // clear canvas for each frame 
      ctx.clearRect(x, 0, '100%', '100%'); 

      // calculate and set current line-dash for this char 
      ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); 

      // reduce length of off-dash 
      dashOffset -= speed; 

      // draw char to canvas with current dash-length 
      ctx.strokeText(txt[i], x, 90); 

      // char done? no, the loop 
      if (dashOffset > 0) requestAnimationFrame(loop); 

      else { 

      // ok, outline done, lets fill its interior before next 
      ctx.fillText(txt[i], x, 90); 

      // reset line-dash length 
      dashOffset = dashLen; 

      // get x position to next char by measuring what we have drawn 
      // notice we offset it a little by random to increase realism 
      x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random(); 

      // lets use an absolute transform to randomize y-position a little 
      ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); 

      // and just cause we can, rotate it a little too to make it even 
      // more realistic 
      ctx.rotate(Math.random() * 0.005); 

      // if we still have chars left, loop animation again for this char 
      if (i < txt.length) requestAnimationFrame(loop); 
      } 
     })(); // just to self-invoke the loop 
}; 

非常にうまく機能：

これは私が使用しているコードです。しかし、私は同時に文字を書く必要があります。私は何を変更できますか？

は

Answer 1

が

function setup(txt, fill){ 
     // get 2D context 
    $('body').append("<canvas id = 'newWord' width='1000' height=800></canvas>"); 
    $("#newWord").css("position","absolute"); 
    $("#newWord").css("top","300px"); 
    $("#newWord").css("left","700px"); 
    $("#newWord").css("overflow","visible"); 
    var ctx = document.querySelector("#newWord").getContext("2d"), 

     // dash-length for off-range 
     dashLen = 200, 

    // we'll update this, initialize 
     dashOffset = dashLen, 

    // some arbitrary speed 
     speed = 20, 

    // the text we will draw 
     //txt = "TEST", 

    // start position for x and iterator 
    x = 50, i = 0,z = 0; w = 0; 

    // Comic Sans?? Let's make it useful for something ;) w/ fallbacks 
    ctx.font = "80pt Impact"; 

    // thickness of the line 
    ctx.lineWidth = 10; 


    // to avoid spikes we can join each line with a round joint 
    //ctx.lineJoin = "round"; 

    // increase realism letting background (f.ex. paper) show through 
    ctx.globalAlpha = 1; 

    // some color, lets use a black pencil 
    ctx.strokeStyle = "yellow"; 
    ctx.fillStyle = fill; 

    (function loop() { 
     // clear canvas for each frame 
     ctx.clearRect(x, 0, '100%', '100%'); 

     // calculate and set current line-dash for this char 
     ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); 

     // reduce length of off-dash 
     dashOffset -= speed; 

     // draw char to canvas with current dash-length 
     ctx.strokeText(txt, x, 90); 

     // char done? no, the loop 
     if (dashOffset > 0) requestAnimationFrame(loop); 

     else { 

     // ok, outline done, lets fill its interior before next 
     ctx.fillText(txt, x, 90); 

     // reset line-dash length 
     dashOffset = dashLen; 

     // get x position to next char by measuring what we have drawn 
     // notice we offset it a little by random to increase realism 
     x += ctx.measureText(txt).width + ctx.lineWidth * Math.random(); 

     // lets use an absolrequestAnimationFrameute transform to randomize y-position a little 
     ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); 

     // and just cause we can, rotate it a little too to make it even 
     // more realistic 
     ctx.rotate(Math.random() * 0.005); 

     // if we still have chars left, loop animation again for this char 
     if (i < 0){i++; requestAnimationFrame(loop);} 
     } 
    })(); // just to self-invoke the loop 
}; 

このコードを試しいただきありがとうございます