如何只绘制这部分弧线？

Question

看看这张图:

我知道p1,p2和中心,这是2d点.我也知道角度p1-center-p2和半径r.

如何使用画布'函数arc()绘制弧的填充部分？

编辑

我真正需要做的是,给定2个点和一个角度,在这两个点之间绘制一条曲线,使得p1-center-p2角度是给定角度.

我所做的是计算其中有2个点的圆周的中心和半径,现在我需要绘制连接p1和p2并具有给定角度的线.这是我计算环球中心的功能(工作正常)

function getCenter(v0x, v0y, v1x, v1y, curve) {
    // result = p0
    resx = parseFloat(v0x);
    resy = parseFloat(v0y);

    // tmpvec = (p1 - p0) * .5
    tmpx = (v1x - v0x) / 2;
    tmpy = (v1y - v0y) / 2;

    // result += tmpvec
    resx = resx + tmpx;
    resy = resy + tmpy;

    // rotate 90 tmpvec
    tmptmpx = tmpx;
    tmptmpy = tmpy;
    tmpy = -tmptmpx;
    tmpx = tmptmpy;

    // tmpvec *= 1/tan(c/2)
    tmpx *= 1/Math.tan(curve/2);
    tmpy *= 1/Math.tan(curve/2);

    // return res + tmpvec
    return [resx+tmpx, resy+tmpy];
}

Answer 1

函数atan2(y,x)对于计算圆中各点的角度很有帮助。

function drawArcPart(cx, cy, radius, p1x, p1y, angle) {

    var x = p1x - cx;
    var y = p1y - cy;

    var startAngle = Math.atan2(y,x);
    var endAngle = startAngle - angle;

    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle='black';
    ctx.beginPath();
    ctx.arc(cx, cy, radius, startAngle, endAngle, true);
    ctx.fill();
}

我已将此 JavaScript 上传到jsFiddle，其扩展程序也可以绘制要点，以及您的两个示例。