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

我已经搜索过但还没有找到关于如何使用JavaScript在 Canvas 上绘制螺旋线的任何信息。

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

另外，要做到这一点，我猜我将不得不使用三角函数和极坐标作图，自从这样做以来已经有一段时间了。如果是这样的话，您能指出我正确的数学方向吗？

最佳答案

阿基米德螺旋线表示为r=a+b(angle)。将其转换为x，y坐标，将表示为x=(a+b*angle)*cos(angle)，y=(a+b*angle)*sin(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/

关于javascript - 使用JavaScript在HTML Canvas 上绘制螺旋，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6824391/