Образец:
Меньше ерунды, просто загрузите код:
Arrow.js
/*** Реализовать функцию стрел на рисунках между двумя точками* @author [email protected]* @version 1.0* @date 2013.05.23*/; (функция (окно, документ) {if (window.mapleque == undefined) window.mapleque = {}; if (window.mapleque.arrow! /** * Receive canvas object and draw arrows here (the start and end point of the arrow has been set) * @param context */ paint:function(context){paint(this,context);}, /** * Set the arrow start and end point * @param sp start point * @param ep end point * @param st intensity */ set:function(sp,ep,st){init(this,sp,ep,st);}, /** * Установите появление со стрелкой * @param args */setPara: function (args) {this.size = args.arrow_size; // Размер стрелки Paint = Function (A, Context) {var sp = a.sp; context.moveto (sp.x, sp.y); context.lineto (ep.x, ep.y); // нарисовать стрелку var h = _calch (a, sp, ep, контекст); 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 (); }; // Рассчитать координату головы 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}; }; // Координата вращения 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 = щитка;}) (Window, Document);
Arrow.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> Выборка стрелки </title> <script type = "text/javascript" src = "./ arrrow.js"> </script> </head> <body> <canvas width = 800 hiest = 600 id arrowl 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}); window.mapleque.arrow (); a2.set ({x: 100, y: 100}, {x: 200, y: 250}); a2.paint (продолжение); var a3 = new window.mapleque.arrow (); a3.set ({x: 100, 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, rhrow_sharp: 0.5}) a4.paint (продолжение); </script> </body> </html>