Question

我正在尝试绘制现有二次曲线的一半，但我不确定如何调整控制点来执行此操作：

http://jsfiddle.net/s6sB8/3/

您将看到画布上绘制的圆角矩形的上半部分以及带有顶部CSS边框的框。我想要做的是用帆布重现css绘制的框，换句话说，将角落切成两半。

我一直在搞乱起点＆amp;第一个控制点，但无法弄清楚如何准确拼接曲线。

我知道画布不能完美匹配CSS，这不是很好，我不是想要它。我试图得到正好一半的曲线，而根本没有拧紧它的形状。而且我对这背后的数学感兴趣，而不是这个具体例子的解决方案

更新示例：http://jsfiddle.net/s6sB8/4/

你可以看到，尽管接近，我试图绘制的曲线与原始曲线不完全相符......

Answer 1

作为我的项目http://canvimation.github.com/的一部分，我需要能够绘制圆角矩形。

我使用Bezier曲线来近似四分之一圆而不是二次曲线来绘制角。我根据我的代码http://jsfiddle.net/kCd7b/创建了一个小提琴来绘制圆角矩形。在函数rounded_rectangle中，left，top，width和height是边界矩形的参数，radius是角弧的半径。我认为，该函数可以改为使用弧形或二次曲线

注意：1我对此方法的引用来自此问题答案中的第二个链接。 How to best approximate a geometrical arc with a Bezier curve?

注意2：我的方法首先绘制水平顶线并绘制完整曲线。如果你想从曲线的中间开始并绘制曲线的一半，那么你需要阅读http://www.iancgbell.clara.net/maths/bezier.htm

注3：我使用贝塞尔曲线而不是弧线，因为它使绘图和变换函数更容易编写，因为它们只需要考虑lineTo和bezierCurveTo我绘制的任何形状。

注3：我项目的源代码位于https://github.com/canvimation/canvimation.github.com

Answer 2

我不是很擅长这个，所以，只是一个建议。

Mozilla的一个很好的例子： https://developer.mozilla.org/samples/canvas-tutorial/2_5_canvas_quadraticcurveto.html

来自wiki的

二次函数： http://en.wikipedia.org/wiki/Quadratic_curve

在阅读上面的链接后，我们知道current position是起点，control point是永不到达的点，但越来越近，我们需要一个终点。当我们拥有它们时，我们得到了一条曲线。

在您的问题中，我们“像这样调整control point”：

      ctx.moveTo          ( 15, 11 );
      ctx.quadraticCurveTo( 16, 10, 20, 10 );
      ctx.lineTo          ( 95, 10 );

      ctx.moveTo          ( 100, 11);
      ctx.quadraticCurveTo( 99, 10, 95, 10 );

      ctx.lineWidth = 10;
      ctx.stroke();

看起来很好。

你如何将二次曲线切成两半？

2 个答案: