写作效果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
 };