javascript - JS 在 JavaScript 中绘制多色螺旋

Question

我正在尝试在 HTML5 Canvas 上绘制多彩多姿的阿基米德螺线。
我的最终目标是对录音进行数据可视化，这将是一种静态螺旋时间线。每种颜色代表录音中的一个事件。

我在网上查了很多天，但找不到真正符合我目标的东西。我习惯了 PHP，但不习惯 JS。我得到了base source code for drawing a spiral在我的脚本中。

重点是我从 json 数组中获取每种颜色的十六进制值和长度(以像素为单位)。
每个彩色部分应该在螺旋上紧接着彼此跟随，没有阴影效果。
我不知道如何获取最后一个颜色部分的结束位置以开始绘制新的颜色部分。以下代码的结果使所有颜色叠加。

感谢您的帮助!

这是我的 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> 

Answer 1

JSFiddle

我更改了颜色以使其更易于查看。我将 beginPath(); 方法移至第一个 for 循环内，以便它每次都可以开始绘制新颜色。接下来，我将 moveTo() 方法设置为从上一行结束的位置开始。在下一个 for 循环中，我在范围之外使用了一个变量 curIteration 来跟踪绘图的进度。 JavaScript:

var lengthOfColors = ["29.47965973","45.35332267","70.29765013"]; 
var colorCodes = ['purple','red','green']; // 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;

$('form').on('submit', function(e) {
    e.preventDefault();

    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);
    // Temporarily store prev location
    var x = centerx, y = centery, curIteration = 0;
    for (var i = 0; i < lengthOfColors.length; i++) {
        context.beginPath();
        context.moveTo(x, y);

        for (; curIteration < lengthOfColors[i]; curIteration++) {
            angle = 0.1 * curIteration;//Angle of line rotation = 0.1
            x = centerx + (a * angle) * Math.cos(angle);
            y = centery + (b * angle) * Math.sin(angle);
            context.lineTo(x, y);
            console.log('x: ' + x + ', y: ' + y);
        }

        console.log(colorCodes[i]);
        context.strokeStyle = colorCodes[i];
        context.stroke();//draw the path
    }
});

和 HTML:

<canvas id="c" width="600" height="600"></canvas>
<br/>
<form>
Cosinus: <input id="a" type="text" value='20'/>
<br/>
Sinus: <input id="b" type="text" value='20'/>
<br/>
<input type="submit" value="Draw" />