javascript - 我可以在画布中逐部分描边路径吗？

Question

我想一步一步画出一条路径，任意两步之间有一定的时间段。

我现在的代码是

let canvas = document.getElementById("c");
let ctx = canvas.getContext('2d');

let p = 'M10 10 h 80 v 80 h -80 Z';
let pathArr = ["M10", "10 h", "80 v", "80 h", "-80 Z"];
let lgt = pathArr.length;
let i = 0;

(function draw() {
    if(i < lgt){
        let pathElem = new Path2D(pathArr[i]);
        ctx.stroke(pathElem);
        i++;
        setTimeout(draw, 200);
    }
})();

预期的功能是做ctx.stroke(p)会做的事情，但一步一步地，就像pathArr一次抚摸一个元素，每两笔之间有 200 毫秒的延迟。

但是，此代码无法按预期工作。我做错了什么，我应该怎么做才能使其按预期工作？

标签： javascripthtmlcanvashtml5-canvas