在HTML5畫布上畫圓的3種方式的示例

Question

我可以使用ctx.arcTo方法拼湊出一種繪制圓形的方法，但是我很難理解如何應用Bezier方程式來使用它們大致繪制橢圓或圓形（任意近似地近似一個橢圓或圓形）。

想知道這三種方法的實現是從凸出點a到凸出點a到點b繪制圓弧（橢圓或圓的一部分或全部）。

 var canvas = document.querySelector('canvas') var ctx = canvas.getContext('2d') ctx.moveTo(0, 0) arcTo(ctx, 100, 100, 50, 50, 20, 20) cubicTo(ctx, 110, 110, 10, 10, 120, 120) quadTo(ctx, 210, 210, 10, 10, 220, 220) function arcTo(ctx, xi, yi, r1, r2, xf, yf, bulgeIn) { ctx.save() ctx.beginPath() ctx.moveTo(xi, yi) ctx.arc(xi, yi, xf, yf, r1) ctx.closePath() ctx.stroke() ctx.restore() } function cubicTo(ctx, xi, yi, r1, r2, xf, yf, bulgeIn, approximationLevel) { // ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) } function quadTo(ctx, xi, yi, r1, r2, xf, yf, bulgeIn, approximationLevel) { // ctx.quadraticCurveTo(cpx, cpy, x, y) } 

 <style> canvas { background: #eee; width: 200px; height: 200px; } </style> <canvas></canvas> 

我想知道如何以任意角度，在圓周的任何長度的部分段上做橢圓和圓。 基本上只是html5 canvas的通用公式。

Answer 1

都是基於相同的原理：您可以通過采用圓形或橢圓形的參數公式（分別為x²+y²=一些常數和x²/ a +y²/ b =一些常數）來畫一個圓或橢圓，並為這些點合並有效點公式。 不知何故。 您可以簡單地選擇距離非常近的點，因為隨后的點實際上是“下一個像素”（這就是arcTo所做的事情），因此沒有任何“連接”的地方，但是您也可以將它們隔開得更遠，然后再將它們連接起來使用：

• 線
• 二次貝塞爾曲線
• 三次貝塞爾曲線
• 幾乎任何類型的曲線，因為您知道它需要通過的所有點

面臨的挑戰不是加分，而是要知道事情開始變得很糟糕之前，這些點可以相距多遠。

例如，對於二次貝塞爾曲線， 您需要8條或更多條曲線才能看起來像樣 。 比這少，它開始看起來很糟。 對於三次貝塞爾曲線， 通常4就足夠了 。 對於其他曲線類型，它實際上取決於數學，您或其他人必須計算出這些數學值才能確定看起來正確所需的點數。

但實際上，如果您使用的編程語言具有arcTo，則甚至可以使用arcTo或circle（）和ellipse（）。 如果您只能直接繪制需要繪制的內容，請不要估計。