Question

63

Drawing a spiral on an HTML canvas using JavaScript

rated 0 times [ 69] [ 6] / answers: 1 / hits: 35868 / 13 Years ago, tue, july 26, 2011, 12:00:00

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

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mustafaericho questions

1 npm i Error: `gyp` failed with exit code: 1

Mon, May 31, 21, 00:00, 3 Years ago

1 Node js, process.env not reading enviroment variables

Sun, May 23, 21, 00:00, 3 Years ago

1 Webpack erroring on mini-css-extract-plugin loader

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Webpack processAssets hook and asset source

Sat, Jan 2, 21, 00:00, 3 Years ago

1 what is the default AES config in crypto-js?

Thu, Nov 12, 20, 00:00, 4 Years ago

View All

answered 13 Years ago clarissakourtneyb · Accepted Answer

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);

}

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

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