Question

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

我在网上查了很多天但找不到真正符合我目标的东西。我习惯了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

我更改了颜色以便于查看。我在第一个for循环中移动了beginPath(); - 方法，这样它每次都可以开始绘制一个新颜色。接下来，我将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" />

Answer 2

JSFiddle

好的，我从http://fr.openclassrooms.com/forum/sujet/js-dessiner-une-spirale-multicolore-en-javascript的用户那里得到了解决方案我传递了累积长度值作为循环的参数。再次感谢你的帮助！这是包含真实数组的整个JS代码：

//Fork of http://jsfiddle.net/jingshaochen/xJc7M/ with the big help of bvx89 on StackOverFlow.com and 007julien on http://fr.openclassrooms.com
var cumLengthOfColors = [29.47965973,74.8329824,145.1306325,244.9079424,256.2462731,371.8972459,380.9679104,383.2355765,505.6895477,507.9572139,519.2955445,605.4668576,632.6788512,634.9465173,700.7088352,780.0771499,877.5867936,882.1221259,1199.595385,1208.666049,1210.933715,1242.681041,1251.751706,1254.019372,1408.220669,1412.756001,1498.927314,1507.997979,1510.265645,1512.533311,1521.603975,1526.139308,1535.209972,1548.815969,1553.351301,1639.522614,1641.790281,1684.875937,1693.946602,1696.214268,1707.552598,1712.087931,1791.456245,2192.833151];
var colorCodes = ['#ffffff','#807f29','#c0c0c0','#ffffff','#00fd5b','#807f29','#808080','#98cdfa','#ffffff','#c0c0c0','#00fd5b','#ffffff','#808080','#00fd5b','#807f29','#c0c0c0','#ffffff','#c0c0c0','#ffffff','#808080','#00807f','#ffffff','#808080','#00807f','#ffffff','#00fd5b','#807f29','#808080','#00fd5b','#807f29','#808080','#00fd5b','#807f29','#808080','#00fd5b','#807f29','#98cdfa','#ffffff','#808080','#00807f','#ffffff','#00fd5b','#807f29','#ffffff'];

var c = document.getElementById('c');
var context = c.getContext("2d");
context.lineWidth=20;
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, 2200, 2200);
    context.beginPath();
    context.moveTo(centerx, centery);
    // Temporarily store prev location
    var x = centerx;
    var y = centery;
    var curIteration = 0;
    for (var i = 0, c = cumLengthOfColors.length; i < c; i++) {
        context.beginPath();
        context.moveTo(x, y);

        for (; curIteration < cumLengthOfColors[i]; curIteration++) {
            angle = 0.1 * curIteration;
            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();
        }
    }
});

这是HTML

<form>
Cosinus: <input id="a" type="text" value='5'/>
<br/>
Sinus: <input id="b" type="text" value='5'/>
<br/>
<input type="submit" value="Dessiner" />
</form>
<canvas id="c" width="2200" height="2200"></canvas>

JS在JavaScript中绘制多色螺旋

2 个答案: