我编写了以下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也可以显式使用相同的字符串输入。但是这两者因某种原因不起作用。
有什么问题?
答案 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
for (i = 0; i < 3; i++){
var path = randomPath();
}
&#13;