非常大的HTML5畫布圈不精確

Question

我正在開發一個應用程序，用戶在HTML5畫布上繪制歐幾里德結構。 因此，我無法真正限制某些形狀的大小。 當我在屏幕上繪制非常大的圓圈時，我注意到非常大的圓圈沒有恆定的半徑。

更具體地說，由兩個點定義的圓，一個中心點和一個指定半徑的圓不再通過半徑點！

進步更大的圈子。 這些都應該通過E點。

在45度= PI / 4的倍數上不會出現錯誤。 在這些倍數之間誤差最大（例如PI / 8）

這是一個包含上面第一個例子的jsfiddle：

http://jsfiddle.net/D28J2/2/

我的問題：為什么會發生這種情況？ 有沒有辦法（有效地）解決這個問題？

Answer 1

我完全解決這個問題的方式是使用bezier曲線滾動我自己實現的圓繪制近似。 有關實施的詳細信息， 請訪問http://www.tinaja.com/glib/ellipse4.pdf 。

function magic_circle(ctx, x, y, r){
  m = 0.551784

  ctx.save()
  ctx.translate(x, y)
  ctx.scale(r, r)

  ctx.beginPath()
  ctx.moveTo(1, 0)
  ctx.bezierCurveTo(1,  -m,  m, -1,  0, -1)
  ctx.bezierCurveTo(-m, -1, -1, -m, -1,  0)
  ctx.bezierCurveTo(-1,  m, -m,  1,  0,  1)
  ctx.bezierCurveTo( m,  1,  1,  m,  1,  0)
  ctx.closePath()
  ctx.restore()
}

只有這四個部分，我能夠比Google Chrome畫布實現中的內容更接近圓圈。

Answer 2

這可能是浮點截止誤差。 可能是因為正弦和余弦沒有給出完全准確的值。 您可以通過旋轉畫布而不是弧來繞過它（至少在Chrome中）。

ctx.save();          // Save the canvas so we can rotate back.
ctx.translate(x, y); // Translate to the origin point.
ctx.rotate(alpha);   // Rotate the proper angle.

ctx.arc(0, 0, 3, 0, Math.PI*2); // Draw the small circle at the origin.
ctx.fill();

ctx.arc(r, 0, r, 0, Math.PI*2); // Create a big with the origin 1 radius away.
ctx.restore();                  // Restore the canvas to the original orientation
                                // before drawing.  Otherwise the circle looks bad.
ctx.strokeStyle = "black";
ctx.stroke();                   // Draw!

我是操縱畫布而不是形狀的忠實粉絲。 它為您提供了更合理的工作區域。 見http://jsfiddle.net/D28J2/10/

Answer 3

只是拋棄它，但如果沒有指定足夠數量的PI，這可能是一個問題嗎？ 每當我做這樣的事情時，我往往會略微過火，並使用大約10位PI。

Answer 4

在谷歌瀏覽器我可以重復這個問題，但在IE 9和IE 10中一切都很好。

所以我的猜測是Chrome中的實現是錯誤的。 它可能是一個舍入誤差，或者他們使用插值方法來避免不是非常精確的sin和cos。

請看這里： HTML5畫布弧在Google Chrome中無法正確呈現

我可以想象的唯一工作是用你自己的代碼或使用（jQuery？）插件為你繪制圓圈。