HTML中，在画布中画箭头

数据库已经有了各种点的信息。界面上可以显示点，现在需要将点用箭头画下来 

  function LoadCanvas(v) {
            var canvas = $("#myCanvas");//获取画布的width，heigth
            canvas.attr("width", v.width);
            canvas.attr("height", v.height);
            LoadLine();//加载点
        }

  //获取点，绘制路线，因为数据库查找时已经对点按时间排序，故这里的点是有序的
        function LoadLine() {
            var lstMapPoint = $(".MapPoint");
            var i = 1;
            var x1, x2, y1, y2;
            for (i = 1; i < lstMapPoint.length; i++) {
                x1 = lstMapPoint.eq(i - 1).css("left");//eq（）索引从0开始
                y1 = lstMapPoint.eq(i - 1).css("top");
                x2 = lstMapPoint.eq(i).css("left");
                y2 =lstMapPoint.eq(i).css("top");
                x1 = parseInt(x1) + 20;
                y1 = parseInt(y1) + 20;
                x2 = parseInt(x2) + 20;
                y2 = parseInt(y2) + 20;
                arrow2("myCanvas", 0, 0, x1, y1, x2, y2);
            }
        }

//绘制路线

 function arrow2(canId, ox, oy, x1, y1, x2, y2) {
            //参数说明 canvas的 id ，原点坐标  第一个端点的坐标，第二个端点的坐标
            var sta = new Array(x1, y1);
            var l = Math.pow((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2), 1 / 2);
            x2 = x2 - (20 / l) * (x2 - x1);
            x2 = x2.toFixed(0);
            y2 = y2 - (20 / l) * (y2 - y1);
            y2 = y2.toFixed(0);
            var end = new Array(x2, y2);
            var canvas = document.getElementById(canId);
            if (canvas == null) return false;
            var ctx = canvas.getContext('2d');// 指定了在画布上绘制的类型。当前唯一的合法值是 "2d"，
            //画线
            ctx.beginPath();//丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)
            ctx.translate(ox, oy, 0); //坐标原点 为画布的变换矩阵添加水平的和垂直的偏移
            ctx.moveTo(sta[0], sta[1]);//窗口的左上角移动到一个指定的坐标
            ctx.lineTo(end[0], end[1]);//方法添加一个新点，然后创建从该点到画布中最后指定点的线条
            ctx.strokeStyle = "#0000ff";
            ctx.fill();//方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
            ctx.lineWidth = 3;
            ctx.stroke();//绘制当前路径的边框。路径定义的几何线条产生了，但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性
            ctx.save();
            //画箭头
            ctx.translate(end[0], end[1]);
            //我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号
            var ang = (end[0] - sta[0]) / (end[1] - sta[1]);
            ang = Math.atan(ang);
            if (end[1] - sta[1] >= 0) {
                ctx.rotate(-ang);
            } else {
                ctx.rotate(Math.PI - ang);//加个180度，反过来
                //ctx.scale(1, 0.2);
            }
            ctx.lineTo(-5, -10);
            ctx.lineTo(0, -5);
            ctx.lineTo(5, -10);
            ctx.lineTo(0, 0);
            ctx.fillStyle = "#0000ff";
            ctx.fill(); //箭头是个封闭图形
            ctx.lineWidth = 3;
            ctx.restore();   //恢复到堆的上一个状态，其实这里没什么用。
            ctx.closePath();
        }