javascript - 在 HTML5 Canvas 上绘制圆形的 3 种方法示例

Question

我可以使用 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>

我想知道如何以任意 Angular 、任意长度的圆周部分来绘制椭圆和圆形。基本上只是 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()。如果你能直接画出你需要画的东西，就不要近似。