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

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

2 个答案: