javascript - 画布，绘制线段

Question

我的三角函数很弱，因此我不知道如何绘制比全线起点和终点短的线段。

http://jsfiddle.net/psyketom/TUyJb/

我尝试过的是，从起点减去目标点的一小部分，但这会导致错误的行。

/* 
 * this is an excerpt from fiddle, that shows
 * the actual calculation functions I have implemented
 */
var target = {
    x : width / 2 + 60,
    y : 20
};

var start = {
    x : width / 2,
    y : height
};

var current = {
    x : 0,
    y : 0
};

var growth = 0.5;

current.x = start.x - (target.x * growth);
current.y = start.y - (target.y * growth);

我敢打赌，我必须使用 sin / cos 或三角学分支中的其他东西才能让它正确。但是，由于我的三角函数甚至没有生锈，但总的来说很弱，所以我被卡住了。

如何绘制正确的目标线？

Answer 1

如果我对您的理解正确，那么这应该可以为您提供所需的内容：

current.x = start.x + (target.x - start.x) * growth;
current.y = start.y + (target.y - start.y) * growth;

Answer 2

该方程是一个线性插值，它与线性缓动相同。您取开始和结束的增量（最小值和最大值），将其乘以增量的百分比（法线），然后将其添加回起始值。非常重要的算法:)