1


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

我在网上查了很多天，但找不到真正符合我目标的东西。我习惯了 PHP，但不习惯 JS。我得到了在我的脚本中绘制螺旋的基本源代码。

关键是我从 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>
4

2 回答 2

1

JSFiddle

我更改了颜色以使其更易于查看。我beginPath();在第一个 for 循环中移动了 - 方法，以便它每次都可以开始绘制新颜色。接下来，我将moveTo()-method 设置为从上一行结束的位置开始。在下一个 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" />
于 2013-09-23T17:34:33.727 回答
0

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>
于 2013-09-24T13:43:20.510 回答