Canvas quadraticCurveto中心点

Question

我想知道如何在HTML5画布中检测quadraticCurve的中心坐标。我想在曲线的中心点画箭头。

有我的绘制曲线方法：

function draw_curve(Ax, Ay, Bx, By, M, context) {
var dx = Bx - Ax,
    dy = By - Ay,
    dr = Math.sqrt(dx * dx + dy * dy);

// side is either 1 or -1 depending on which side you want the curve to be on.
// Find midpoint J
var Jx = Ax + (Bx - Ax) / 2
var Jy = Ay + (By - Ay) / 2

// We need a and b to find theta, and we need to know the sign of each to make sure that the orientation is correct.
var a = Bx - Ax
var asign = (a < 0 ? -1 : 1)
var b = By - Ay
var bsign = (b < 0 ? -1 : 1)
var theta = Math.atan(b / a)

// Find the point that's perpendicular to J on side
var costheta = asign * Math.cos(theta)
var sintheta = asign * Math.sin(theta)

// Find c and d
var c = M * sintheta
var d = M * costheta

// Use c and d to find Kx and Ky
var Kx = Jx - c
var Ky = Jy + d
// context.bezierCurveTo(Kx, Ky,Bx,By, Ax, Ax);
context.quadraticCurveTo(Kx, Ky, Bx, By);

// draw the ending arrowhead
var endRadians = Math.atan((dx) / (dy));
context.stroke();


var t = 0.5; // given example value

var xx = (1 - t) * (1 - t) * Ax + 2 * (1 - t) * t * Kx + t * t * Bx;
var yy = (1 - t) * (1 - t) * Ay + 2 * (1 - t) * t * Ky + t * t * By;

var k = {};
k.x = xx;
k.y = yy;

通过此代码解决，T是在曲线上设置位置的参数：

var t = 0.5; // given example value

var xx = (1 - t) * (1 - t) * Ax + 2 * (1 - t) * t * Kx + t * t * Bx;
var yy = (1 - t) * (1 - t) * Ay + 2 * (1 - t) * t * Ky + t * t * By;

var k = {};
k.x = xx;
k.y = yy;