javascript基于HTML5画布制作画箭头组件

样例：

废话少说，直接上代码：

arrow.js

/** * 实现两点间画箭头的功能* @作者[电子邮件保护]* @ 1.0版* @日期2013年。05 .23 */;（函数（窗口、文档){ if(window。枫木窗。枫阙={ }；if (window.mapleque.arrow！=未定义)返回；/** * 组件对外接口*/var proc={ /** *接收帆布对象，并在此上画箭头（箭头起止点已经设置)* @ param context */paint :函数(context){ paint(this，context)；}, /** * 设置箭头起止点* @param sp起点* @param ep终点* @param st强度*/set:function(sp，ep，st){init(this，sp，ep，ST)；}, /** * 设置箭头外观* @ param args */set para :函数(args){ this。size=args。arrow _ size//箭头大小这个。sharp=args。arrow _夏普；//箭头锐钝} };var init=function(a，sp，ep，ST){ a . sp=sp；//起点a.ep=ep/终点a.st=st/strong度};var paint=function(a，context){ var sp=a . sp；var EP=a . epif(context==undefined)返回；//画箭头主线语境。begin path()；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(h.h2.x，h.h2。y)；语境。笔画()；};//计算头部坐标var _ calcH=函数(a，sp，ep，context){ var=math。阿坦(((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。y-l *(a . size | | 0.05)；CH2。x=CEP。x-l *(a . sharp | | 0.025)；CH2。y=CEP。y-l *(a . size | | 0.05)；var h1=_scrollXOY(ch1，theta)；var h2=_scrollXOY(ch2，)；返回{ h1:h1，h 2: H2 }；};//旋转坐标var _ scrollXOY=函数(p，){ return { x : p . x * math。cos()p . y *数学。sin()，y : p . y *数学。cos()-p . x *数学。sin()}；};var箭头=新函数();arrow.prototype=procwindow。枫雀。箭头=箭头；})(窗口、文档);arrow.html

！DOCTYPE html html heartheta charset=' UTF-8 '箭头的标题示例/标题脚本类型=' text/JAVAScript ' src=' http :/arrow。js '/脚本/头dycanvas宽度=800高度=600 id=' ArroLine '请使用支持HTML5的浏览器/拉票脚本类型=' text/JavaScript ' var cont=document。getelementbyid('箭头线').getContext(' 2d ')；var a1=新窗口。枫雀。arrow()；a1.set({x:350，y:300}，{x:200，y :200 })；a1。油漆（续);var a2=新窗口。枫雀。arrow()；a2.set({x:100，y:100}，{x:200，y :250 })；a2。油漆（续);var a3=新窗口。枫雀。arrow()；a3.set({x:100，y:300}，{x:150，y :150 })；a3。油漆（续);var a4=新窗口。枫雀。arrow()；a4.set({x:350，y:150}，{x:150，y :250 })；a4.setPara({ arrow_size:0.5，arrow_sharp:0.5})a4.paint(续);/脚本/正文/html