一组点之间的线性插值？

Question

我有一个包含x，y值的数组。现在我可以在屏幕上绘制这些点，但我在这些点之间进行插值有问题。

我试过搜索但是每个人都使用不同的算法并且让我感到困惑。我尝试了Bresenham的线算法，但我似乎也无法理解它。

var myVar = setInterval(function () {
    ctx.clearRect(0, 0, 1000, 800);
    ctx.strokeRect(pts[q].x, pts[q].y, 20, 20);
    q++;
}, 1000/60);

pts具有所有x，y坐标，q只是访问数组的变量。现在我可以得到当前点和下一点之间的距离，但后来我感到困惑。我不知道该怎么办这个距离？

任何人都可以向我解释它是如何工作的吗？还是指向正确的方向？