大佬教程收集整理的这篇文章主要介绍了Html5 canvas 画带箭头的线，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
@R_75_3816@ 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 startradians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
startradians+=((this.x2>this.x1)?-90:90)*Math.PI/180;
this.drawArrowhead(ctx,this.x1,this.y1,startradians);
// draw the Ending arrowhead
var endradians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
endradians+=((this.x2>this.x1)?90:-90)*Math.PI/180;
this.drawArrowhead(ctx,this.x2,this.y2,endradians);
}
Line.prototype.drawArrowhead=function(ctx,x,y,radians){
ctx.save();
ctx.beginPath();
ctx.translate(x,y);
ctx.rotate(radians);
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,250,275);
// draw the line
line.drawWithArrowheads(context);
以上是大佬教程为你收集整理的Html5 canvas 画带箭头的线全部内容，希望文章能够帮你解决Html5 canvas 画带箭头的线所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。