견본:
덜 말도 안되는 코드를 업로드하기 만하면됩니다.
Arrow.js
/*** 두 지점 사이에 화살표를 그리는 기능을 구현* @author [email protected]* @version 1.0* @version 1.0* @date 2013.05.23*/; /** * 여기에서 캔버스 객체를 받고 화살표를 그렸습니다 (화살표의 시작과 끝점이 설정 됨) * @param 컨텍스트 * /페인트 : 함수 (컨텍스트) {페인트 (컨텍스트);}, /** * 화살표 시작 및 엔드 포인트 설정 * @param ep end point * @param st intensity * / set : function (sp, ep, st) {init (this, sp, ep, st);},/*** 화살표 모양* @param args*/setpara : function (args) a.sp = spect; Context.Moveto (sp.x, sp.y); context.lineto (ep.x, ep.y); // 화살표 헤드 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 (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.yp.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); 반환 {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 = 새로운 기능 (); 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 = "./ Arrow.js"> </script> </head> <body> <800 height = 600 id = "Arrowline"을 사용합니다. 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 : y : 200}; wind wind