在HTML5画布上画圆的3种方式的示例

Question

我可以使用ctx.arcTo方法拼凑出一种画圆的方法，但是我很难理解如何应用Bezier方程来一般地画一个椭圆或圆（任意近似地近似一个）使用它们。

想知道这三种方法的实现方式是从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所做的事情），因此没有任何“连接”的地方，但是您也可以将它们隔开得更远，然后再将它们连接起来使用：

• 行
• 二次贝塞尔曲线
• 三次贝塞尔曲线
• 实际上是任何类型的曲线，因为您知道它需要通过的所有点

挑战不在于合并要点，而是要知道事情开始变得很糟之前，这些要点之间的距离可以很远。

例如，对于二次贝塞尔曲线，you need 8 or more curves for things to look decent。比这少，它开始看起来很糟。对于三次贝塞尔曲线，4 is usually enough。对于其他曲线类型，它实际上取决于数学，您或其他人必须解决这些问题才能确定看起来正确所需的点数。

但是，实际上，如果您使用的编程语言具有arcTo，甚至使用circle（）和ellipse（）。如果您只能直接绘制需要绘制的内容，请不要估计。