javascript - 在HTML5 Canvas 上画圆的3种方式的示例

我可以用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的通用公式。

最佳答案

都是基于相同的原理：您可以通过采用圆形或椭圆形的参数公式（分别为x²+y²=一些常数和x²/ a +y²/ b =一些常数）来画一个圆或椭圆，并为这些点合并有效点制定。不知何故。您可以简单地选择距离非常近的点，因为随后的点实际上是“下一个像素”（这就是arcTo所做的事情），因此没有任何“连接”的地方，但是您也可以将它们隔开得更远，然后再将它们连接起来使用：


线
二次贝塞尔曲线
三次贝塞尔曲线
几乎任何类型的曲线，因为您知道它需要通过的所有点


面临的挑战不是加分，而是要知道事情开始变得很糟糕之前，这些点可以相距多远。

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

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

关于javascript - 在HTML5 Canvas 上画圆的3种方式的示例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54440437/