عينة:
أقل هراء ، فقط قم بتحميل الكود:
Arrow.JS
/*** قم بتنفيذ وظيفة رسم الأسهم بين نقطتين* author [email protected]* version 1.0* date 2013.05.23*/؛ (الوظيفة (نافذة ، مستند) {if (window.mapleque == undefined) window.mapleque = {} ؛ / ** * استلام كائن قماشية وسحب الأسهم هنا (تم تعيين نقطة البدء والنهاية للسهم) * param context * / paint: function (context) {paint (this ، context) ؛} ، / ** /*** قم بتعيين مظهر السهم* param args*/setpara: الدالة (args) {this.size = args.arrow_size ؛ var paint (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) ؛ 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) ؛ سياق. ضربة () ؛ } ؛ // حساب إحداثيات الرأس 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) ؛ العودة {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 ؛}) (نافذة ، وثيقة) ؛
Arrow.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> عينة من السهم </title> <script type = "text/javaScript" src = "./ Arrow.js"> </script> </head> <body> <canvas width = 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 ، 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}) ؛ 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> </body> </html>