由于您使用的是二次曲线,因此您知道有两个点构成一条指向箭头“方向”的线:
因此,只要扔掉一点点三角函数,你就有了一个解决方案。这是一个可以为您完成此操作的通用函数:
http://jsfiddle.net/SguzM/
function drawArrowhead(locx, locy, angle, sizex, sizey) {
var hx = sizex / 2;
var hy = sizey / 2;
ctx.translate((locx ), (locy));
ctx.rotate(angle);
ctx.translate(-hx,-hy);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,1*sizey);
ctx.lineTo(1*sizex,1*hy);
ctx.closePath();
ctx.fill();
ctx.translate(hx,hy);
ctx.rotate(-angle);
ctx.translate(-locx,-locy);
}
// returns radians
function findAngle(sx, sy, ex, ey) {
// make sx and sy at the zero point
return Math.atan2((ey - sy), (ex - sx));
}