繪製橢圓與二次貝塞爾曲線和三次貝塞爾曲線

我建立一個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

繪製橢圓與二次貝塞爾曲線和三次貝塞爾曲線

回答

相關問題