在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（）。如果您可以直接绘制您需要绘制的内容，请不要近似。