jv中svg中的随机路径

时间:2015-11-14 15:03:29

标签: javascript svg

我编写了以下javaScript来尝试在svg中绘制随机路径。

<script>
window.onload = function() {

    function randomPath(){
    var x = Math.trunc(Math.random());
    var y = Math.trunc(Math.random());
    var xstep = 0;
    var ystep = 0;
    var path = '0,0';
    for (i = 0; i < 2 ; i++) {
          path += ' ';
          path += (x).toString();
          path += ',';
          path += (y).toString();
          xstep = Math.random();
          ystep = Math.random();
          xstep *= 10;
          ystep *= 10;
          x += Math.trunc(xstep);
          y += Math.trunc(ystep);
        };
        return path;
      };

    var figure = document.createElementNS('http://www.w3.org/2000/svg','svg');
    figure.id = 'brownian-figure';
    figure.setAttribute('height', '400pt');
    figure.setAttribute('width', '200pt');

    var pathArray = [];
    for (i = 0; i < 3; i++){
    pathArray[i] = document.createElementNS('http://www.w3.org/2000/svg','polyline');
    };

    for (i = 0; i < 3; i++){
    var path = randomPath();
    alert(path);
    pathArray[i].setAttribute('points', path);
    pathArray[i].setAttribute('style', 'fill:none;stroke:rgba(0,0,0,1);stroke-width:1');
    figure.appendChild(pathArray[i]);
    };

    var divfigure = document.createElement('div');
    divfigure.id = 'divfigure';
    divfigure.style = 'margin:0pt;padding:0pt;border:0pt none;background-color:rgba(240,240,240,1);position:absolute;top:100pt;left:100pt;width:200pt;height:400pt;';
    divfigure.appendChild(figure);

    document.body.appendChild(divfigure);
  };
</script>

请注意,randomPath()函数中的for只有两个步骤。

代码确实运行,并使用该较小的值绘制步数。在我尝试分配它之前,有一个alert(path)让我看到路径。

但是,在代码中for randomPath()内有3个或更多步骤alert(path)仍显示较长的路径,但脚本会显示错误

TypeError: pathArray[i] is undefined
    pathArray[i].setAttribute('points', path);

如果我将错误行中的path替换为显式路径(由randomPath()输出),请说'0,0 0,0 4,8 8,15'它仍然不起作用。但是,如果我这样做并且还删除了对randomPath()功能的调用,那么它再次起作用。

我很困惑。似乎函数randomPath()运行良好,因为alert显示格式正确的字符串。 svg也可以显式使用相同的字符串输入。但是这两者因某种原因不起作用。

有什么问题?

1 个答案:

答案 0 :(得分:1)

问题是becoz里面的for循环你初始化str1 <- "H2SO4" str2 <- "C4H10O" str3 <- 'Fe3' str4 <- 'Fe2O3' 并递增它然后你调用randomPath()也包含i并且该函数将它增加到3次所以当它出来时功能你有i值3 因此,i上的错误会将其更改为k或者randomPath()中的某些内容,如果不希望变量为全局,则会将变量初始化为pathArray[i].setAttribute('points', path);

var identifier

&#13;
&#13;
for (i = 0; i < 3; i++){
    var path = randomPath();

    }
&#13;
&#13;
&#13;