javascript - 如何用 JavaScript 在 Canvas 上绘制圆 Angular 矩形的下半部分

Question

我正在使用二次曲线在 Canvas 上绘制大圆 Angular 矩形，如下所示:

    var ctx = canvas.getContext('2d');
    ...
    ctx.moveTo(x, my);
    ctx.quadraticCurveTo(x, y, mx, y);
    ctx.quadraticCurveTo(x + w, y, x + w, my);
    ctx.quadraticCurveTo(x + w, y + h, mx, y + h);
    ctx.quadraticCurveTo(x, y + h, x, my);

我可以画一个完整的圆 Angular 矩形: http://jsfiddle.net/s9x3xn4z/

我可以绘制圆 Angular 矩形的上半部分: http://jsfiddle.net/1oeduLqx/

但我不知道如何绘制圆 Angular 矩形的下半部分。

我的尝试最终看起来像这样: http://jsfiddle.net/tfyagcew/

这绝对不是我想要的!

如何绘制圆 Angular 矩形的下半部分？

Answer 1

这只是上半部分的颠倒版本:

ctx.moveTo(x, y);
ctx.quadraticCurveTo(x, my, mx, my);
ctx.quadraticCurveTo(x + w, my, x + w, y);

第一个坐标对是控制点，第二个坐标对是目的地。中间点必须是 (mx, my)，终点是 (x + w, y)。