1.這篇為最基礎的鼠標點擊，移動生成一個隨意方向的箭頭，日后再把復雜的效果補上；
2.涉及到canvas，面向對象，一些數學角度運算,當然還有jq;
3.content:
首先canvas聲明
var canvas=document.getElementById('canvas');
var ctx=canvas.getContent('2d');
接下來聲明draw對象，省略部分取值，此處為骨干代碼；
var draw=function(box,ctx,arr_arrow,flag){//box為最外層盒子，ctx canvas上下文，arr_arrow空數組用於儲存，flag按鈕
this.box=box;
this.ctx=ctx;
this.arr_arrow=arr_arrow;//儲存箭頭點
this.flag=flag;
this.moment();
this.retry();
};
draw.prototype={
moment:function(){
var flag_an=false; //事件驅動
var t=this;
this.box.mousedown(function(e){
var e= e||window.event;
var obj={};
obj.a=e.offsetX;
obj.b=e.offsetY;
t.arr_arrow[0]=obj;
flag_an=true; });
this.box.mousemove(function(e){
if(flag_an){
var e= e||window.event;
var obj={};
obj.a=e.offsetX;
obj.b=e.offsetY;
t.arr_arrow[1]=obj;
t.ctx.clearRect(0,0,480,270);
t.draw_arrow();
} });
this.box.mouseup(function(){
flag_an=false;
});
} ,
draw_arrow:function(){ //箭頭 //
var t=this;
t.develop(t.arr_arrow[0].a,t.arr_arrow[0].b,t.arr_arrow[1].a,t.arr_arrow[1].b);
},
jiantou:function(x,y,p,q){
var xn1,yn1,xn2,yn2;
xn1=(x-p)*Math.cos(Math.PI/4)-(y-q)*Math.sin(Math.PI/4)+p;
yn1=(x-p)*Math.sin(Math.PI/4)+(y-q)*Math.cos(Math.PI/4)+q;
xn2=(x-p)*Math.cos(Math.PI*1.75)-(y-q)*Math.sin(Math.PI*1.75)+p;
yn2=(x-p)*Math.sin(Math.PI*1.75)+(y-q)*Math.cos(Math.PI*1.75)+q;
return {x1:Number(xn1),x2:Number(xn2),y1:Number(yn1),y2:Number(yn2)
} //此處為箭頭尖角處的旋轉方法，改變角度即可調整，箭頭開口大小
},
develop:function(a,b,p,q){
//繪制處代碼
var that=this;
var a=a;
var b=b;
var p=p;
var q=q;
var x,y;
//第一象限
if(p<=a&&q<=b){
x=p+(Math.abs(p-a)/10); y=q+(Math.abs(q-b)/10);
};
//第二象限
if(p>=a&&q<=b){
x=p-(Math.abs(p-a)/10); y=q+(Math.abs(q-b)/10);
};
//第三象限
if(p<=a&&q>=b){
x=p+(Math.abs(p-a)/10); y=q-(Math.abs(q-b)/10);
}
//第四象限
if(p>=a&&q>=b){ x=p-(Math.abs(p-a)/10); y=q-(Math.abs(q-b)/10);
} //x,y為截取所繪制線段生成箭頭端，1/10處的坐標。因為設置的箭頭的尖角的長度是整體長度的1/10；
var objCenter=that.jiantou(x,y,p,q);//旋轉坐標，返回為兩個旋轉后的坐標，位於線段兩側，並且與線段夾角為45度；
ctx.beginPath();
ctx.moveTo(a,b);
ctx.lineTo(p,q);
ctx.lineTo(objCenter.x1,objCenter.y1);
ctx.lineTo(p,q);
ctx.lineTo(objCenter.x2,objCenter.y2);
ctx.lineStyle=2;
ctx.strokeStyle='#00f';
ctx.stroke();
ctx.closePath();// 繪制，沒什么好說的
}
}
4.基本上就可以簡單達到所需的箭頭效果，改天再加上復雜的配合，如箭頭中部存在法線箭頭，繪制多邊形，多邊形內部增加方向箭頭，以及繪制多個箭頭，可控制數目上限，並且標記箭頭生成順序等。