Javascript draw arrow widget based on HTML5canvas _ javascript skills

This component allows you to draw arrows Based on the coordinate at the start and end of arrows. Currently, you can set the arrow shape (size and angle) for the widget ). 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

 Sample of the arrow