Muestra:
Menos tonterías, solo sube el código:
flecha.js
/*** Implemente la función de dibujar flechas entre dos puntos* @author [email protected]* @version 1.0* @Date 2013.05.23*/; (function (window, document) {if (window.mapleque == undefined) window.mapleque = {}; if (window.mapleque.arw! /** * Recibir el objeto de lienzo y dibujar flechas aquí (el punto de inicio y finalización de la flecha se ha establecido) * @param context * /pintar: function (context) {pintar (this, context);}, /** * Establecer el punto de inicio de flecha y el punto final * @param sp start Point * @param end Point * @param st intensity * /set: function (sp, sp, st) {this, this, sp, sp, st); Establezca la apariencia de flecha * @param args */setpara: function (args) {this.size = args.arrow_size; // size de flecha this.sharp = args.arw_sharp; // fleche sharp and blunt}}; pintar = función (a, contexto) {var sp = a.sp; context.moveto (sp.x, sp.y); context.lineto (ep.x, ep.y); // dibujar la cabeza de flecha var h = _calch (a, sp, ep, contexto); 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 (); }; // Calcule la coordenada del cabezal 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.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}; }; // coordenada de rotación 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 flecha = nueva función (); Arrow.prototype = proc; window.mapleque.arw = flecha;}) (ventana, documento);
flecha.html
< Html5 </Canvas> <script type = "text/javascript"> var content = document.getElementById ("Arrowline"). GetContext ('2d'); var a1 = new Window.mapleque.arrow (); a1.set ({x: 350, y: 300}, {x: 200, y: 200}); a1.paint (cont); Window.mapleque.arrow (); a2.set ({x: 100, 100, y: 100}, {x: 200, y: 250}); a2.Paint (cont); var a3 = new Window.mapleque.arrow (); a3.set ({x: 100, y y: 300}, {x: 150, y: 150}); Window.mapleque.arrow (); a4.set ({x: 350, y: 150}, {x: 150, y: 250}); a4.setpara ({Arrow_size: 0.5, Arrow_sharp: 0.5}) a4.paint (cont); </script> </buerte> </html>