js给直线加箭头

onpaint(ctx) { //View
let theta = 30; //箭头与直线夹角
let headlen = 10; //箭头长度
let angle = Math.atan2(this.pt1.y-this.pt2.y,this.pt1.x-this.pt2.x)180/Math.PI; //角a
let angle1 = (angle+theta)Math.PI/180; //角a2
let angle2 = (angle-theta)Math.PI/180; //角a1
let topX = headlenMath.cos(angle1); //上箭头初始位置y坐标，下同（相对于箭头所画的横坐标）
let topY = headlenMath.sin(angle1);
let botX = headlenMath.cos(angle2); //下箭头初始位置x坐标，下同
（相对于箭头所画的横坐标）
let boxY = headlen*Math.sin(angle2);
ctx.save();
let style = this.style;
ctx.lineWidth = style.lineWidth;
ctx.strokeStyle = style.lineColor;
ctx.beginPath();
let arrowX;
let arrowY;
ctx.moveTo(this.pt1.x, this.pt1.y);
ctx.lineTo(this.pt2.x, this.pt2.y);
arrowX = this.pt2.x+topX; //上箭头初始位置y坐标，下同。（相对于整个页面）
arrowY = this.pt2.y+topY;
ctx.moveTo(arrowX,arrowY);
ctx.lineTo(this.pt2.x, this.pt2.y);
arrowX = this.pt2.x+botX; //下箭头初始位置y坐标，下同。（相对于整个页面）
arrowY = this.pt2.y+boxY;
ctx.lineTo(arrowX,arrowY);
ctx.stroke(); //划线
ctx.restore();
}