绘制椭圆与二次贝塞尔曲线和三次贝塞尔曲线

我建立一个JavaScript模块来增加便利功能HTML5画布元素。我正在尝试尽可能多的不同实现来填写我的模块。要查看我的进度，请访问我的project page和我的examples page。绘制椭圆与二次贝塞尔曲线和三次贝塞尔曲线

我有一个椭圆形绘制使用三次贝塞尔曲线的方法。我知道，二次Bezier曲线可以转化为三次Bezier曲线，但我有一些问题：

是否有误差余量任何区别近似于圆时？椭圆？
是否有任何理由有两个实现？（性能，准确性等）
我是否缺少绘制椭圆的其他方法？

P.S.这不是直接相关的，但是有没有其他的功能可以在这样的模块中使用？

注：这是不是一个家庭作业。

编辑：这是我的一个椭圆码（d是在X半径，YDIS是Y半径）：

function ellipse(x, y, xDis, yDis) { 
    var kappa = 0.5522848, // 4 * ((√(2) - 1)/3) 
     ox = xDis * kappa, // control point offset horizontal 
     oy = yDis * kappa, // control point offset vertical 
     xe = x + xDis,  // x-end 
     ye = y + yDis;  // y-end 

    this.moveTo(x - xDis, y); 
    this.bezierCurveTo(x - xDis, y - oy, x - ox, y - yDis, x, y - yDis); 
    this.bezierCurveTo(x + ox, y - yDis, xe, y - oy, xe, y); 
    this.bezierCurveTo(xe, y + oy, x + ox, ye, x, ye); 
    this.bezierCurveTo(x - ox, ye, x - xDis, y + oy, x - xDis, y); 
}

相关问题：

Convert a quadratic bezier to a cubic?

https://stackoverflow.com/questions/2688808/drawing-quadratic-bezier-circles-with-a-given-radius-how-to-determine-control-po

来源

2011-04-06 tjameson

甲三次Bezier曲线具有比二次一个两个degrees of freedom。它可以进一步减少错误。尽管选择控制点的数学计算越复杂，曲线的程度越高，但三次曲线应该足够简单。

性能的差异并不大。多一些乘法和补充。

虽然这可以由平面旋转来实现，这将是很好能够指定椭圆的轴。一个中心和两个轴将形成椭圆center + cos(t)*axis1 + sin(t)*axis2。

库的另一个特点可能是不同种类的多项式曲线和样条。 A B-spline与贝塞尔曲线相似，但可以沿着多个控制点继续。

来源

2011-04-06 13:00:02

+1对于B样条建议。我想我已经在做你说的话了。我会在这里发布我的代码以防万一。 – tjameson 2011-04-06 16:22:24

如果它是一个香草椭圆，绘制椭圆的标准参数形式并不容易，并将结果通过旋转tr如果它有一个非规范的方向呢？

来源

2011-04-06 09:14:37

这基本上是我现在正在做的，但我使用的是三次曲线而不是二次曲线。检查[这里]（http://www.xul.fr/en/html5/canvas-curve.php）。 [This]（http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html）是我正在使用的API。 – tjameson 2011-04-06 09:19:42

绘制椭圆与二次贝塞尔曲线和三次贝塞尔曲线

回答

相关问题