Javascript creates an arrow component based on HTML5 canvas

Example:

Put the following code directly:

Arrow. js

/*** Implement the function of drawing arrows between two points * @ 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;/*** external interface of the component */var proc = {/*** receives the canvas object and draws an arrow on it (the start and end points of the arrow have been set) * @ param context */paint: function (context) {paint (this, context );}, /*** set the start and end points of the arrow * @ param sp Start Point * @ param ep end point * @ param st intensity */set: function (sp, ep, st) {init (this, sp, ep, st) ;},/*** set arrow appearance ** @ param args */setPara: function (args) {this. size = args. arrow_size; // the size of the arrow. this. sharp = args. arrow_sharp; // arrow acute blunt }}; var init = function (a, sp, ep, st) {. sp = sp; // start point. ep = ep; // end. st = st; // strength}; var paint = function (a, context) {var sp =. sp; var ep =. ep; if (context = undefined) return; // draw the main arrow context. beginPath (); context. moveTo (sp. x, sp. y); context. lineTo (ep. x, ep. y); // draw the arrow header 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 () ;}; // calculates the head coordinate 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 values = {x: 0, y: 0}; var ch2 = {x: 0, y: 0}; var l = cep. y-csp.y; ch1.x = cep. x + l * (. fast | 0.025); ch1.y = cep. y-l * (. size | 0.05); ch2.x = cep. x-l * (. fast | 0.025); ch2.y = cep. y-l * (. size | 0.05); var h1 = _ scrollXOY (values, theta); var h2 = _ scrollXOY (ch2, theta); return {h1: h1, h2: h2 };}; // rotating coordinate 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>