canvas实现打字输入效果

打字输入效果

查看完整代码，在线试一试

代码如下：

const arr = ["H", "E", "L", "L", "O", "W", "O", "R", "L", "D"];

      const c = document.getElementById("myCanvas");

      const ctx = c.getContext("2d");

      let index = 0;

      const draw = () => {

        if (index < arr.length - 1) {

          setTimeout(draw, 500);

        }

        ctx.font = "60px Arial bolder";

        ctx.fillStyle = "rgba(0,0,0,0)";

        ctx.fillText(arr[index], 60 * index, 50);

        ctx.setTransform(2, 0, 0, 2, 0, 0);

        ctx.fillStyle = "#000";

        ctx.fillText(arr[index], 60 * index, 50);

        index++;

      };

      draw();