javascript - 使用 JavaScript 在 HTML Canvas 上绘制螺旋

Question

我已经搜索过，但没有找到任何关于如何使用 JavaScript 在 Canvas 中绘制螺旋线的内容。

我认为可以使用贝塞尔曲线来实现，如果不起作用，请使用 lineTo()，但这似乎要困难得多。

此外，我猜想我必须使用三 Angular 函数和极坐标绘图，而且我已经有一段时间没有这样做了。如果是这种情况，您能否为我指出正确的数学方向。

Answer 1

阿基米德螺线表示为 r=a+b(angle)。将其转换成x、y坐标，表示为x=(a+b*angle)*cos(angle), y=(a+b*angle)*sin( Angular )。然后你可以将 angle 放入 for 循环中并执行如下操作:

for (i=0; i< 720; i++) {
  angle = 0.1 * i;
  x=(1+angle)*Math.cos(angle);
  y=(1+angle)*Math.sin(angle);
  context.lineTo(x, y);
}

注意上面假设 a = 1 和 b = 1。

这是一个 jsfiddle 链接:http://jsfiddle.net/jingshaochen/xJc7M/