Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/70.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 画布,绘制线段_Javascript_Html_Canvas_Drawing_Line - Fatal编程技术网

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;

该方程为线性插值,与线性松弛相同。取起点和终点的增量(最小值和最大值),乘以沿增量的距离的百分比(法线),然后将其加回到起点值。难以置信的基本算法:)

是的,这会产生预期的结果,有算法描述这一点吗?