如何在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, y);
ctx.quadraticCurveTo(x, my, mx, my);
ctx.quadraticCurveTo(x + w, my, x + w, y);

第一個坐標對是控制點，第二個坐標對是目的地。 中點必須是(mx, my) ，最后一點是(x + w, y) 。

Answer 2

很簡單的答案：

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