canvas實(shí)現(xiàn)打字輸入效果
打字輸入效果
代碼如下：
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();
