在 HTML5 canvas 上画圆的 3 种方法示例

Examples of the 3 ways to draw a circle on HTML5 canvas

我可以拼凑出一种使用 ctx.arcTo 方法绘制圆的方法,但我很难理解如何将贝塞尔方程应用于一般绘制椭圆或圆(任意接近的近似值一)使用它们。

想知道从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 = 某个常数)来绘制圆或椭圆,然后加入这些公式的有效点。不知何故。您可以简单地选择非常接近以至于没有任何东西 "to join" 的点,因为后续点实际上是 "the next pixel" (这就是 arcTo 所做的),但您也可以 space 它们更远,然后您可以使用以下方式加入:

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

挑战不在于连接点,而是在事情开始看起来很糟糕之前知道点之间可以相距多远。

例如,对于二次贝塞尔曲线,you need 8 or more curves for things to look decent. Fewer than that, and it starts to look bad. For cubic Bezier curves, 4 is usually enough。对于其他曲线类型,它实际上取决于数学,您或其他人必须算出这些数学来确定您需要多少点才能使事情看起来正确。

但实际上,使用 arcTo,或者如果您使用的编程语言有 circle() 和 ellipse() 的话。能直接画出自己需要画的就不要近似