Я хочу нарисовать определенный путь шаг за шагом, с определенным периодом времени между любыми двумя шагами.
Код, который у меня сейчас есть,
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 мс между каждыми двумя штрихами.
Но этот код не работать как задумано. Что я делаю не так, и что я должен сделать, чтобы заставить его работать как нужно?