在HTML5画布二次曲线上绘制箭头

我有一条二次曲线，我想在它的末端画一个箭头。我有以下代码：

var ctx=document.getElementById（'arrowCanvas'）.getContext（'2d'）；
var起点x=55；
var起始点=50；
var-endPointX=108；
var-endPointY=118；
ctx.strokeStyle=“rgb（0,0255）”；
ctx.lineWidth=3；
变量x=（起点x+终点x）/2；
变量y=（起点+终点）/2；
变量le=（endPointY-endPointY）/（startPointX-endPointX）；
变量角度=数学常数（le）；
var sx=数学功率（（起点x-终点x），2）；
var sy=Math.pow（（endPointY-endPointY），2）；
var d=数学sqrt（sx+sy）/2；
var px=x-d*数学sin（角度）；
var py=y+d*数学cos（角度）；
变量arrowAngle=Math.atan2（x-endPointX，y-endPointY）；
var-arrowWidth=20；
ctx.beginPath（）；
ctx.moveTo（起点X，起点Y）；
四次曲线（px，py，endPointX，endPointY）；
ctx.lineTo（endPointX-arrowWidth*Math.sin（arrowAngle-Math.PI/6），endPointY-arrowWidth*Math.cos（arrowAngle-Math.PI/6））；
ctx.moveTo（endPointX，endPointY）；
ctx.lineTo（endPointX-arrowWidth*Math.sin（arrowAngle+Math.PI/6），endPointY-arrowWidth*Math.cos（arrowAngle+Math.PI/6））；
ctx.stroke（）；
ctx.closePath（）
使用二次点对齐：


var ctx=document.getElementById（'arrowCanvas'）.getContext（'2d'）；
var起始点x=50；
var起始点=10；
var-endPointX=100；
var-endPointY=120；
var quadPointX=35；
var quadPointY=70；
ctx.strokeStyle=“rgb（0,0255）”；
ctx.lineWidth=3；
var arrowAngle=Math.atan2（quadPointX-endPointX，quadPointY-endPointY）+Math.PI；
var-arrowWidth=20；
ctx.beginPath（）；
ctx.moveTo（起点X，起点Y）；
ctx.二次曲线（四点x，四点y，端点x，端点y）；
//ctx.lineTo（endPointX，endPointY）；
ctx.moveTo（endPointX-（箭头宽度*Math.sin（箭头角度-Math.PI/6）），
端点-（arrowWidth*Math.cos（arrowAngle-Math.PI/6））；
ctx.lineTo（endPointX，endPointY）；
ctx.lineTo（端点X-（箭头宽度*数学正弦（箭头角度+数学PI/6）），
端点-（arrowWidth*Math.cos（arrowAngle+Math.PI/6））；
ctx.stroke（）；
ctx.closePath（）
var sy=Math.pow（（endPointY-endPointY），2）这是错误吗？是的，但将其更改为startPointY-endPointY并不能解决问题。谢谢你的提醒！向上投票指定箭头角度===四点到端点的角度。