如何用JavaScript在画布上绘制圆形矩形的下半部分

Question

我正在画布上使用二次曲线绘制大型圆角矩形，如下所示：

    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);

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

我可以画出圆角矩形的上半部分：http://jsfiddle.net/1oeduLqx/

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

我的尝试都是这样结束的：http://jsfiddle.net/tfyagcew/

这绝对不是我想要的！

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

Answer 1

很简单的答案：

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

Answer 2

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

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

第一个坐标对是控制点，第二个是目的地。中间点必须是（mx，my），最后一点是（x，w，y）。