Question

我使用HTML5画布绘制一系列点，使用数组数据绘制这些点。我想在点之间画出流畅的线条，我想从第一个点开始到最后一点，就像加入点游戏一样。

我使用以下代码在我的画布上绘制，但我无法弄清楚如何在点之间绘制平滑的线条

context.lineTo(event.offsetX, event.offsetY);
context.stroke();
context.beginPath();
context.arc(event.offsetX, event.offsetY,5, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(event.offsetX, event.offsetY);

我的点数据看起来像这样

 data = [
     [192,27]
    ,[183,55]
    ,[307,375]
    ,[192,521]
    ]

enter image description here

Answer 1

还尝试使用cubic Hermite interpolation：

function interpolation (a, b, t) {
    var t = t * t * (3 - 2 * t);
    return a + (b - a) * t;
}

看起来很顺利：https://jsfiddle.net/nh23hhdh/

下一个函数进行线性插值（也称为lerp），您将看到原始结果：

function interpolation (a, b, t) {
    return a + (b - a) * t;
}

有关使用各种插值函数，请参阅此page。

HTML5画布通过点画

1 个答案: