JavaScript is based on HTML5 canvas to make a drawing arrow component _javascript Tips

Sample Example:

Less nonsense, directly on the code:

Arrow.js

/** * To achieve the function of two-point arrow @author mapleque@163.com * @version 1.0 * @date 2013.05.23/;(function (window,document) {if (
 window.mapleque==undefined) window.mapleque={};
 
 if (window.mapleque.arrow!=undefined) return; /** * Component External interface/var proc={/** * Receive Canvas object, and on this draw arrow (arrowhead start point has been set) * @param context */paint:function (context) {Paint (t His,context);},/** * Set arrowhead starting point * @param sp start * @param EP endpoint * @param st Strength/set:function (sp,ep,st) {init (this,sp,ep,s t);/** * Set arrow appearance * @param args/setpara:function (args) {this.size=args.arrow_size;//arrow size This.sharp=args.arro
 
 w_sharp;//arrow Sharp Blunt}};
 var init=function (a,sp,ep,st) {a.sp=sp;//Beginning a.ep=ep;//endpoint a.st=st;//intensity};
 var paint=function (a,context) {var sp=a.sp;
 var Ep=a.ep;
 if (context==undefined) return;
 Draw Arrow Main Line Context.beginpath ();
 Context.moveto (SP.X,SP.Y);
 Context.lineto (EP.X,EP.Y);
 Draw Arrow Head Var h=_calch (A,sp,ep,context);
 Context.moveto (EP.X,EP.Y);
 Context.lineto (H.H1.X,H.H1.Y); Context.moveto (EP.X,EP.Y);
 Context.lineto (H.H2.X,H.H2.Y);
 Context.stroke ();
 };
 Computes the head coordinates var _calch=function (a,sp,ep,context) {var Theta=math.atan (ep.x-sp.x)/(EP.Y-SP.Y));
 var Cep=_scrollxoy (Ep,-theta);
 var Csp=_scrollxoy (Sp,-theta);
 var ch1={x:0,y:0};
 var ch2={x:0,y:0};
 var l=cep.y-csp.y; ch1.x=cep.x+l* (a.sharp| |
 0.025); ch1.y=cep.y-l* (a.size| |
 0.05); ch2.x=cep.x-l* (a.sharp| |
 0.025); ch2.y=cep.y-l* (a.size| |
 0.05);
 var H1=_scrollxoy (Ch1,theta);
 var H2=_scrollxoy (Ch2,theta);
 return {h1:h1, h2:h2};
 }; Rotational coordinates var _scrollxoy=function (P,theta) {return {X:p.x*math.cos (theta) +p.y*math.sin (theta), Y:p.y*math.cos (theta)-P
 . X*math.sin (Theta)};
 
 };
 var arrow=new Function ();
 Arrow.prototype=proc;
Window.mapleque.arrow=arrow; }) (window,document);

Arrow.html

<! DOCTYPE html>