使用canvas实现箭头效果

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.基本上就可以简单达到所需的箭头效果，改天再加上复杂的配合，如箭头中部存在法线箭头，绘制多边形，多边形内部增加方向箭头，以及绘制多个箭头，可控制数目上限，并且标记箭头生成顺序等。