サンプル：
ナンセンスが少なく、コードをアップロードするだけです。
arrow.js
/*** 2つのポイント間で矢印を描画する機能を実装* @Author [email protected]* @version 1.0* @date 20133.05.23*/;（function（window、document）{if（window.mapleque == undefined）window.mapleque = {}; if（window.mapleque.arrow. = undefined）; /** *ここでキャンバスオブジェクトを受け取り、矢印を描画します（矢印の開始とエンドポイントが設定されています）矢印の外観を設定 * @param args */setpara（args）{this.size = args.arrow size this.sharp; // arrow sharp and blunt}}}};塗装= function（context）{var sp = a.ep; 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.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 = arrow;}）（window、document）;
arrow.html
<！Doctype html> <HTML> <head> <メタcharset = "utf-8"> <title>矢印のサンプル</title> <スクリプトタイプ= "text/javascript" src = "./ arrow.js"> </script> </head> <body> <canvas width = 800 hights = 600 id = "arrowline"> html5 </canvas> <script type = "text/javascript"> var content = document.getElementbyId（ "arrowline"）。getContext（ '2d'）; var a1 = new window.mapleque.arrow（）; window.mapleque.arrow（）; a2.set（{x：100、y：100}、{x：200、y：250}）; a2.paint（cont）; var a3 = new window.mapleque.arrow（）; a3.set（{x：100、y：300}、{x：150、y：150}; a3.paint（ 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/> </html> </html>