ตัวอย่าง:
ไร้สาระน้อยลงเพียงอัปโหลดรหัส:
Arrow.js
/*** ใช้ฟังก์ชั่นการวาดลูกศรระหว่างสองจุด* @author [email protected]* @version 1.0* @date 2013.05.23* /; (ฟังก์ชั่น (หน้าต่าง, เอกสาร) {ถ้า (window.mepleque == ไม่ได้กำหนด) /{{}; ถ้า (window.mapleque.arrow! รับวัตถุผืนผ้าใบและลูกศรวาดที่นี่ (จุดเริ่มต้นและจุดสิ้นสุดของลูกศรได้รับการตั้งค่า) * @param บริบท * / สี: ฟังก์ชั่น (บริบท) {สี (นี่, บริบท);}, / ** * ตั้งลูกศรเริ่มต้นและจุดสิ้นสุด * @param sp จุดเริ่มต้น * @param จุดสิ้นสุด รูปลักษณ์ * @param args */setpara: ฟังก์ชั่น (args) {this.size = args.arrow_size; // ลูกศรขนาด this.sharp = args.arrow_sharp; // ลูกศรที่คมชัดและ blunt}}; สี = ฟังก์ชั่น (A, บริบท) {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 = ฟังก์ชั่น (a, sp, ep, บริบท) {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 = ฟังก์ชั่น (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> html5 </anvas> <script type = "text/javaScript"> var content = document.getElementById ("Arrowline"). getContext ('2d'); var a1 = หน้าต่างใหม่. mapleque.arrow (); a1.set ({x: 350, y: 300}, {x: 200 window.mepleque.arrow (); a2.set ({x: 100, y: 100}, {x: 200, y: 250}); a2.paint (cont); var a3 = หน้าต่างใหม่ amepleque.arrow (); a3.set ({x: 100, y: 300}, {x: 150, y: 150 window.mepleque.arrow (); a4.set ({x: 350, y: 150}, {x: 150, y: 250}); a4.setpara ({Arrow_size: 0.5, Arrow_sharp: 0.5}) a4.paint (ต่อ);