非常大的HTML5画布圈不精确

Question

我正在开发一个应用程序,用户在HTML5画布上绘制欧几里德结构.因此,我无法真正限制某些形状的大小.当我在屏幕上绘制非常大的圆圈时,我注意到非常大的圆圈没有恒定的半径.

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

进步更大的圈子.这些都应该通过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 实现中的构建更好地近似一个圆。