HTML5画布。画一条线并缩短它

Question

我有一个HTML5画布，左上角有0,0。

我画了一条从10,15到100,300的线。

保持相同的斜率...如果我想要那条线，那么2个末端坐标是什么 每端缩短10个单位？

Answer 1

这样做的步骤是：
1）获取你的线的单位向量   （这是长度为1的矢量，其方向与您的线相同。）
2）在开始/结束点添加/减去所需长度*单位矢量 3）......画线！

小提琴：    http://jsbin.com/vajasibe/1/edit?js,output

步骤1，具有就地功能：

function buildUnitVector(p1, p2, uVect) {
     uVect.x = (p2.x - p1.x);
     uVect.y = (p2.y - p1.y );
     var vectorNorm = Math.sqrt( sq(uVect.x)+sq(uVect.y) );
     uVect.x/=vectorNorm;
     uVect.y/=vectorNorm;
}

带

 function sq(x) { return x*x ;}

第2步，就地也是：

function drawShorterLine(ctx, p1, p2, a, b) {
    buildUnitVector(p1, p2, unitVector);
    sp1.x = p1.x + unitVector.x * a;
    sp1.y = p1.y + unitVector.y * a;
    sp2.x = p2.x - unitVector.x * b;
    sp2.y = p2.y - unitVector.y * b;
    ctx.beginPath();
    ctx.moveTo(sp1.x, sp1.y);
    ctx.lineTo(sp2.x, sp2.y);
    ctx.stroke();
}
var unitVector = { x:0, y:0 }, sp1 = {x:0,y:0},
            sp2 = {x:0, y:0 } ; 

 // use with
 var p1 = {x:0, y:0}, p2 = {x:100, y:300} ;
 drawShorterLine(ctx, p1, p2, 10, 10);