graphics - 非常大的 HTML5 Canvas 圆不精确

Question

我正在开发一个应用程序，用户可以在 HTML5 Canvas 上绘制欧几里得结构。因此，我无法真正限制某些形状的大小。当探索在屏幕上绘制非常大的圆圈时，我注意到非常大的圆圈没有恒定的半径。

更具体地说，由两个点(一个中心点和一个指定半径的点)定义的圆不再通过半径点!

圆圈逐渐变大。这些都应该经过E点。

45 度的倍数 = PI/4 时不会出现错误。这些倍数之间的误差最大(例如 PI/8)

这是一个包含上面第一个示例的 jsfiddle:

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

我的问题:为什么会发生这种情况？有没有办法(有效地)解决这个问题？

Answer 1

我完全解决这个问题的方法是使用贝塞尔曲线实现我自己的圆形绘制近似。详细介绍该实现的文章可以在这里找到 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 canvas 实现中构建的更好地近似一个圆。