使用 JavaScript 在 HTML 画布上绘制螺旋线 [英] Drawing a spiral on an HTML canvas using JavaScript

问题描述

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

I have searched and haven't found anything really on how to draw spirals in canvas using JavaScript.

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

I thought it might be possible to do it with the bezier curve and if that didn't work use lineTo(), but that seemed a lot harder.

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

Also, to do that I'm guessing I would have to use trigonometry and graphing with polar coordinates and its been a while since I did that. If that is the case could you point me in the right direction on the math.

推荐答案

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

The Archimedean spiral is expressed as r=a+b(angle). Convert that into x, y coordinate, it will be expressed as x=(a+b*angle)*cos(angle), y=(a+b*angle)*sin(angle). Then you can put angle in a for loop and do something like this:

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.

Note the above assumes a = 1 and b = 1.

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

Here is a jsfiddle link: http://jsfiddle.net/jingshaochen/xJc7M/

这篇关于使用 JavaScript 在 HTML 画布上绘制螺旋线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！