在canvas中绘制箭头

canvas中没有提供绘制箭头的函数，需要自己手动绘制，幸好箭头并不复杂，简单来说箭头由三条线段组成，如下图所示，线段AB、BC和BD，关键在于在给定端点A和B的坐标情况下，如何计算点C和D的坐标。

 这里有两个思路可供参考，如下

思路一，利用线段

 

首先，在线段AB上确定一个点P，接着经过P点画一条直线与AB垂直，最后在直线P点两端确定C和D点。

确定P点坐标，利用三角形相似得，

 

计算得P的横坐标xp = xb - (xb-xa)*|BP|/|BA|，同样纵坐标yp = yb - (yb-ya)*|BP|/|BA|。

 确定直线CD，直线CD垂直于AB，所以：CD斜率*AB斜率=-1，CD斜率k=(xa-xb) / (yb-ya)。

点p经过直线CD，将P点坐标带入斜截式直线方程y=kx+b，得b=yp - k*xp。

确定C点和D点，令线段|CP|的长度为d，根据距离公式计算C和D的坐标即可，但公式很复杂，没推导出来，所以换一个思路：在直线CD上确定一个Q点（Q点横坐标为xa），则C点的坐标与P点坐标计算类似。

此思路需要单独处理直线平行于坐标轴的情况，代码如下：

    var x3 = 0, y3 = 0;
    var x4 = 0, y4 = 0;
    var d1 = 20;  // BP的长度
    var d3 = d1/2; // CP的长度
    var d2 = Distance(x1, y1, x2, y2); // 求距离
    var x5 = (x2 - d1 * (x2 - x1) / d2); // P点(x5,y5)
    var y5 = (y2 - d1 * (y2 - y1) / d2);
    if (x1 == x2) {
        x3 = x5 - d3;
        x4 = x5 + d3;
        y3 = y5;
        y4 = y5;
    } else if (y1 == y2) {
        x3 = x5;
        x4 = x5;
        y3 = y5 - d3;
        y4 = y5 + d3;
    } else {
        var k = (x1 - x2) / (y2 - y1);
        var b = y5 - k * x5;
        var x6 = x1;  // Q点(x6,y6)
        var y6 = k * x6 + b;
        var d4 = Distance(x5, y5, x6, y6);
        x3 = (x5 - d3 * (x5 - x6) / d4);    
        y3 = (y5 - d3 * (y5 - y6) / d4);    
        x4 = (x5 + d3 * (x5 - x6) / d4);
        y4 = (y5 + d3 * (y5 - y6) / d4);    
    }

思路二，利用夹角

线段BC的长度记为L，即|BC|=|BD|=L，记∠ABD为θ，则点D的坐标计算如下：

同理，C的坐标xc = xb - L × cos(α-θ)，yc = yd - L × sin(α-θ)。

其中tan(α) = (yb - ya) / (xb - xa)，所以α = Math.atan((yb - ya) / (xb - xa))，由于分母有可能是0，所以改用Math.atan2(yb - ya, xb - xa)计算。atan传入一个参数，atan2传入2个参数：分子和分母。

代码如下：

    var l = 20; // 
    var a = Math.atan2((y2 - y1), (x2 - x1));

    var x3 = x2 - l * Math.cos(a + 30 * Math.PI/180); // θ=30
    var y3 = y2 - l * Math.sin(a + 30 * Math.PI/180);
    var x4 = x2 - l * Math.cos(a - 30 * Math.PI/180);
    var y4 = y2 - l * Math.sin(a - 30 * Math.PI/180);

最后绘图：

    context_.beginPath();
    context_.moveTo(x1, y1);
    context_.lineTo(x2, y2);
    context_.moveTo(x3, y3);
    context_.lineTo(x2, y2);
    context_.lineTo(x4, y4);
    context_.lineWidth = 5;
    context_.strokeStyle = "#000000";
    context_.stroke();

箭头如下：

 

错误绘图方式：

 

 箭头顶端多一个歪斜的尖，不美观。