Javascript 画布,绘制线段
我的三角函数非常弱,因此我不知道如何画一条比整条直线的起点和终点短的线段 我尝试过的是,从起点减去目标点的一小部分,但结果是一条错误的线Javascript 画布,绘制线段,javascript,html,canvas,drawing,line,Javascript,Html,Canvas,Drawing,Line,我的三角函数非常弱,因此我不知道如何画一条比整条直线的起点和终点短的线段 我尝试过的是,从起点减去目标点的一小部分,但结果是一条错误的线 /* * 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 = {
/*
* 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);
我敢打赌,我必须使用正/反或三角分支中的其他东西才能使它正确。但是,由于我的三角学甚至没有生锈,但总体上很弱,我被卡住了
如何给目标画一条合适的线?如果我理解正确,那么这应该会给你你想要的:
current.x = start.x + (target.x - start.x) * growth;
current.y = start.y + (target.y - start.y) * growth;
该方程为线性插值,与线性松弛相同。取起点和终点的增量(最小值和最大值),乘以沿增量的距离的百分比(法线),然后将其加回到起点值。难以置信的基本算法:)是的,这会产生预期的结果,有算法描述这一点吗?