试图修改一个行走javascript的路径

Question

我发现一个代码我试图修改，我无法理解的是如何修改采取的步骤数量并正确控制方向？是否有一些技巧或更简单的方法来控制方向..我只需要在一行中的10个步骤。我也尝试过与这些人一起工作，但这并没有给我太多帮助。我可以改变路径，但它仍然以我不理解的方式进行。

以下是我的代码。

// create a canvas and add it to the DOM
    var createImage = function(w, h) {
        var i = document.createElement("canvas");
        i.width = w;
        i.height = h;
        i.ctx = i.getContext("2d");
        return i;
    }
    var canvas = createImage(941, 600);
    var ctx = canvas.ctx;
    document.getElementsByClassName('bb-item')[0].appendChild(canvas);

    // shapes for the foot. Left foot

    const footScale = 0.05; // how big the foot is
    const stepLen = 20; // distance between steps
    var stepCount = 0; // current set num so left and right can be known
    var stepTime = 100; // time ms between steps



    // path to walk
    const path = [
        15.20191403126277, 62.4451015086347, 15.38688266344644,
        15.80127602121507, 15.98280549274708, 192.86637096042372,
        121.57528916149568, 221.34586055208607, 124.81159479691195,
        256.2979614145819, 141.64038410107662, 293.8391067854107,
        168.82535143857336, 311.9624183437419, 203.77745230106916,
        336.5583411729056, 238.0822920364817, 344.9727358249879, 
        278.2124819156436, 341.0891690624884, 316.40088841355566,
        329.43846877498976, 343.58585575105235, 310.6678960895754,
        370.77082308854904, 275.7157952270795, 359.12012280105046,
        244.64726112708325, 344.23311687813566, 207.10611575625444,
        355.23655603855093, 168.9177092583423, 394.0722236635463, 
        37.2019140312628, 438.0859803052077, 137.84917515834604,
        487.27782596353507, 174.0957982750084, 507.9901820301992, 
        21.9931216791693, 513.1682710468652, 269.243183956247,
        500.87030963228347, 318.43502961457443, 480.1579535656192, 
        54.68165273123674, 453.62744426338134, 396.86543776550707,
        414.1445200788371, 427.9340428271046, 372.7198079555102, 
        47.3518767949864, 320.2916566617712, 442.173787778395, 
        272.39433325761024, 427.9340429825634, 218.02439858261675, 
        41.5265266513118, 185.66134222845398, 472.59506075130815,
        160.418158272207, 514.6670340117198, 168.2291881671332, 
        57.5405924870362, 200.59229872785795, 598.9654951914354, 
        232.9553551615553, 627.4449850627141, 273.08554504131894, 
        651.3936467669101, 320.3356073183967, 663.0443470544095,
        368.2329307225576, 663.6916081814927, 417.4247763808851, 
        649.4518633856611, 460.7912718954633, 626.150462810664, 
        509.33585642670744, 593.1401453294179, 530.6954736204549, 
        556.8935222127556, 559.9273870166451, 517.9197870310509, 
        582.4287517306153
    ];
    const pLen = path.length;
    // fix the path so it starts at zero
    for (var i = 2; i < pLen; i += 2) {
        path[i] -= path[0];
        path[i + 1] -= path[1];
    }
    path[0] = path[1] = 0;

    // tracks the foot pos
    var pos = {
        x: path[0],
        y: path[1],
        index: 0,
    };
    // tracks the foot pointing to pos
    var pos1 = {
        x: path[0],
        y: path[1],
        index: 0,
    };
    // get a distance alone the path
    function getDistOnPath(dist, pos) {
        var nx = path[(pos.index + 2) % pLen] - pos.x;
        var ny = path[(pos.index + 3) % pLen] - pos.y;
        var d = Math.hypot(nx, ny);
        if (d > dist) {
            pos.x += (nx / d) * dist;
            pos.y += (ny / d) * dist;
            return pos;
        }
        dist -= d;
        pos.index += 2;
        pos.x = path[pos.index % pLen];
        pos.y = path[(pos.index + 1) % pLen];
        return getDistOnPath(dist, pos);
    }

    function drawFoot(x, y, dir, left) {
        var i, j, shape;
        var xdx = Math.cos(dir) * footScale;
        var xdy = Math.sin(dir) * footScale;

        if (left) {
            ctx.setTransform(xdx, xdy, -xdy, xdx, x + xdy * 50, y - xdx * 50);
            ctx.rotate(-0.1); // make the foot turn out a bit
        } else {


        }
        // draw the foot as a set of paths points
        var footImage = new Image();
        footImage.src = './images/paw_print.svg';
        ctx.drawImage(footImage, -footImage.width / 2, -footImage.height / 2);
    }

    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    pos1 = getDistOnPath(stepLen / 10, pos1); 

    function drawStep() {

        pos = getDistOnPath(stepLen, pos);
        pos1 = getDistOnPath(stepLen, pos1);
        drawFoot(pos.x, pos.y, Math.atan2(pos1.y - pos.y, pos1.x - pos.x),


(stepCount++) % 2 === 0);
            setTimeout(drawStep, stepTime);
        }
        drawStep();