大佬教程收集整理的这篇文章主要介绍了html5 – Html 5 Canvas完整箭头，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
drawArrowMove: function(e,_self) { var xo = _self.canvastempLeftOriginal; var yo = _self.canvastemPTOPOriginal; if(e.pageX < xo) { e.x = e.x + e.w; e.w = e.w * -1} if(e.pageY < yo) { e.y = e.y + e.h; e.h = e.h * -1} _self.ctxTemp.lineJoin = "round"; _self.ctxTemp.beginPath(); _self.ctxTemp.moveTo(e.x,e.y); _self.ctxTemp.lineTo(e.x + e.w,e.y + e.h); _self.ctxTemp.closePath(); _self.ctxTemp.moveTo(e.x,e.y); _self.ctxTemp.lineTo(15,10); _self.ctxTemp.stroke(); }
任何帮助/想法/提示都会有所帮助.
谢谢.
有趣的是计算箭头的角度,如下所示：
var start@L_874_10@=Math.atan((this.y2-this.y1)/(this.x2-this.x1)); start@L_874_10@+=((this.x2>=this.x1)?-90:90)*Math.PI/180; var end@L_874_10@=Math.atan((this.y2-this.y1)/(this.x2-this.x1)); end@L_874_10@+=((this.x2>=this.x1)?90:-90)*Math.PI/180;
其余的只是绘制线和箭头的2个三角形计算的旋转
Line.prototype.drawArrowhead=function(ctx,x,y,@L_874_10@){ ctx.save(); ctx.beginPath(); ctx.translate(x,y); ctx.rotate(@L_874_10@); ctx.moveTo(0,0); ctx.lineTo(5,20); ctx.lineTo(-5,20); ctx.closePath(); ctx.restore(); ctx.fill(); }
这是代码和小提琴：http://jsfiddle.net/m1erickson/Sg7EZ/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ BACkground-color: ivory; } canvas{Border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); function Line(x1,y1,x2,y2){ this.x1=x1; this.y1=y1; this.x2=x2; this.y2=y2; } Line.prototype.drawWithArrowheads=function(ctX){ // arbitrary styling ctx.strokeStyle="blue"; ctx.fillStyle="blue"; ctx.lineWidth=1; // draw the line ctx.beginPath(); ctx.moveTo(this.x1,this.y1); ctx.lineTo(this.x2,this.y2); ctx.stroke(); // draw the starTing arrowhead var start@L_874_10@=Math.atan((this.y2-this.y1)/(this.x2-this.x1)); start@L_874_10@+=((this.x2>this.x1)?-90:90)*Math.PI/180; this.drawArrowhead(ctx,this.x1,this.y1,start@L_874_10@); // draw the ending arrowhead var end@L_874_10@=Math.atan((this.y2-this.y1)/(this.x2-this.x1)); end@L_874_10@+=((this.x2>this.x1)?90:-90)*Math.PI/180; this.drawArrowhead(ctx,this.x2,this.y2,end@L_874_10@); } Line.prototype.drawArrowhead=function(ctx,@L_874_10@){ ctx.save(); ctx.beginPath(); ctx.translate(x,y); ctx.rotate(@L_874_10@); ctx.moveTo(0,0); ctx.lineTo(5,20); ctx.lineTo(-5,20); ctx.closePath(); ctx.restore(); ctx.fill(); } // create a new line object var line=new Line(50,50,150,150); // draw the line line.drawWithArrowheads(context); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html>
以上是大佬教程为你收集整理的html5 – Html 5 Canvas完整箭头全部内容，希望文章能够帮你解决html5 – Html 5 Canvas完整箭头所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。