数据库已经有了各种点的信息。界面上可以显示点，现在需要将点用箭头画下来
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(); }
