Probe:
Weniger Unsinn, lade einfach den Code hoch:
Arrow.js
/*** Implementieren Sie die Funktion des Zeichnens von Pfeilen zwischen zwei Punkten* @Author [email protected]* @VERSION 1.0* @DATE 2013.05.23*/; (Funktion (Fenster, Dokument) {if (window.mapleque == Undefined) Fenster. / ** * Empfangen Sie hier Canvas -Objekt und zeichnen Sie Pfeile hier (der Start- und Endpunkt des Pfeils wurde festgelegt) * @param Context * / Paint: Funktion (Kontext) {Paint (dieser, Kontext);}, / ** * Setzen /*** Setzen Sie das Arrow -Erscheinungsbild* @param args*/setPara: function (args) {this.size = args.arrow_size; // Pfeilgröße this.sharp = args Paint = Funktion (A, Kontext) {var sp = A.SP; context.moveto (sp.x, sp.y); context.lineto (ep.x, ep.y); // Zeichnen Sie den Pfeilkopf var h = _calch (a, sp, ep, Kontext); context.moveto (ep.x, ep.y); context.lineto (h.h1.x, h.h1.y); context.moveto (ep.x, ep.y); context.lineto (ep.x, ep.y); context.lineto (H.H2.x, H.H2.y); context.stroke (); }; // Berechnen Sie die Kopfkoordinate var _calch = function (a, sp, ep, context) {var theta = math.atan ((ep.xsp.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.yl*(a.size || 0,05); ch2.x = cep.xl*(a.sharp || 0.025); ch2.y = cep.yl*(a.size || 0.05); var h1 = _scrollxoy (ch1, theta); var h2 = _scrollxoy (ch2, theta); return {h1: h1, h2: h2}; }; // Rotationskoordinate var _scrollxoy = function (p, theta) {return {x: px*math.cos (theta)+py*math.sin (theta), y: py*math.cos (theta) -px*math.sin (theta)}; }; var arrow = new Function (); Arrow.Prototype = Proc; window.mapleque.arrow = arrow;}) (Fenster, Dokument);
Arrow.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>sample of the arrow</title><script type="text/javascript" src="./arrow.js"></script></head><body><canvas width=800 height=600 id="arrowLine">Please use a browser that supports Html5 </canvas> <script type = "text/javaScript"> var content = document.getElementById ("Arrowline"). GetContext ('2d'); var a1 = neues Fenster.Mapleque.arrow (); window.mapleque.arrow (); a2.set ({x: 100, y: 100}, {x: 200, y: 250}); window.mapleque.arrow (); a4.set ({x: 350, y: 150}, {x: 150, y: 250});