javascript - JS JavaScript で多色の渦巻きを描く

Question

HTML5 キャンバスに色とりどりのアルキメデスの螺旋を描こうとしています。
私の最終的な目標は、サウンド レコードのデータ ビジュアライゼーションを作成することです。これは、静的なスパイラル タイムラインのようなものです。各色は、サウンド レコード内のイベントを表します。

何日も Web で調べましたが、本当に自分の目標に一致するものを見つけることができませんでした。私はPHPには慣れていますが、JSには慣れていません。スクリプトでスパイラルを描画するためのベース ソース コードを取得しました。

ポイントは、json 配列から各色の 16 進数値とピクセル単位の長さを取得していることです。
色付きの各セクションは、らせんの直後に互いに続く必要があり、シェーディング効果はありません。
新しいカラー セクションの描画を開始するために、最後のカラー セクションの終了位置を取得する方法がわかりません。次のコードの結果は、すべての色を重ね合わせます。

ご協力いただきありがとうございます ！

ここに私のJSコードがあります:

var lengthOfColors = ["29.47965973","45.35332267","70.29765013"]; 
var colorCodes = ["#000","#807f29","#c0c0c0"]; // the real arrays are much longers

var c = document.getElementById('c');
var context = c.getContext("2d");
var centerx = context.canvas.width / 2;
var centery = context.canvas.height / 2;

$('#draw').click(function() 
{
a = parseFloat($('#a').val());
    b = parseFloat($('#b').val()); //The user can define Cosinus and Sinus

    context.clearRect(0, 0, 600, 600);
context.beginPath();
context.moveTo(centerx, centery);

for (var beg = 0, end = lengthOfColors.length; beg < end; beg++)
  {
  for (i = 0; i < lengthOfColors[beg]; i++)
    {
    angle = 0.1 * i;//Angle of line rotation = 0.1
    x = centerx + (a * angle) * Math.cos(angle);
    y = centery + (b * angle) * Math.sin(angle);
    context.lineTo(x, y);
    }
  context.strokeStyle = colorCodes[beg];
  context.stroke();//draw the path
  };
});

ここに私のHTMLコードがあります:

<canvas id="c" width="600" height="600"></canvas>
<br/>
Cosinus: <input id="a" type="text" value='1'/>
<br/>
Sinus: <input id="b" type="text" value='1'/>
<br/>
<button id="draw">Draw</button>