javascript“for”循环出现问题

我有下面的代码，它应该将一系列三角形写入画布元素，但它似乎只经过一次循环，只有第一个三角形写入画布。我已经研究过很多类似的问题，但是我没有成功地找到我的问题，我希望第二双眼睛可能会有所帮助

我在脚本顶部附近定义数组，如下所示：

var array = [0, 0.2, 0.4, 0.6, 0.8];

for (i = 0; i < array.length; i++) 
{
    ctx.beginPath();
    ctx.moveTo(array[i],height);
    ctx.lineTo(((width*0.075) + array[i]),0);
    ctx.lineTo(((width*0.15 + array[i])),(height));
    ctx.closePath();
    ctx.fill();
}

谢谢大家的回复。原来我把括号放错地方了。宽度*0.075+数组[i]等是预期的。以下是在大约210 px*30 px的画布上的预期行为

var array = [0, 0.2, 0.4, 0.6, 0.8];

for (i = 0; i < array.length; i++) 
{
    ctx.beginPath();
    ctx.moveTo(width * array[i], height);
    ctx.lineTo(width * (0.075 + array[i]),0);
    ctx.lineTo(width * (0.15 + array[i]),(height));
    ctx.closePath();
    ctx.fill();
}

尝试使用闭包

for (i = 0; i < array.length; i++) 
{
(function(ind){
    ctx.beginPath();
    ctx.moveTo(array[ind],height);
    ctx.lineTo(((width*0.075) + array[ind]),0);
    ctx.lineTo(((width*0.15 + array[ind])),(height));
    ctx.closePath();
    ctx.fill();
})(i);
}

这应该可以解决问题。

尝试使用闭包

for (i = 0; i < array.length; i++) 
{
(function(ind){
    ctx.beginPath();
    ctx.moveTo(array[ind],height);
    ctx.lineTo(((width*0.075) + array[ind]),0);
    ctx.lineTo(((width*0.15 + array[ind])),(height));
    ctx.closePath();
    ctx.fill();
})(i);
}

---

这应该可以解决问题。

它实际上迭代了5次，但它只是在前面的三角形上绘制了相同的三角形，因为数组中的值太小了。尝试使用更大的值：

您的浏览器不支持HTML5画布标记。 var c=document.getElementByIdmyCanvas； var ctx=c.getContext2d； 变量数组=[0,40,80120160]； var高度=150； var宽度=300； 对于i=0；i<数组长度；i++ { ctx.beginPath； ctx.移动到阵列[i]，高度； ctx.lineTowidth*0.075+阵列[i]，0； ctx.lineTowidth*0.15+阵列[i]，高度； ctx.closePath； ctx.fill； }

---

它实际上迭代了5次，但它只是在前面的三角形上画了相同的三角形，因为数组中的值太小了。尝试使用更大的值：

您的浏览器不支持HTML5画布标记。 var c=document.getElementByIdmyCanvas； var ctx=c.getContext2d； 变量数组=[0,40,80120160]； var高度=150； var宽度=300； 对于i=0；i<数组长度；i++ { ctx.beginPath； ctx.移动到阵列[i]，高度； ctx.lineTowidth*0.075+阵列[i]，0； ctx.lineTowidth*0.15+阵列[i]，高度； ctx.closePath； ctx.fill； }

---

那么您是在将i定义为全局范围？可怕的。。这根本无助于回答这个问题，但你永远不应该把东西放在全球范围内。它似乎只经过一次循环-是的，你为什么会期望其他东西？在数组中循环一次。@GottZ如果不使用use strict；，循环在没有声明i的情况下执行。除非有其他代码影响它，否则循环将执行5次。也就是说，循环块中的代码是否检查了控制台中的错误？？您希望看到什么？它实际上会循环5次，即使使用您的代码也是如此。它只是在上一个三角形上画了相同的三角形。那么你是在全局范围内定义i？可怕的。。这根本无助于回答这个问题，但你永远不应该把东西放在全球范围内。它似乎只经过一次循环-是的，你为什么会期望其他东西？在数组中循环一次。@GottZ如果不使用use strict；，循环在没有声明i的情况下执行。除非有其他代码影响它，否则循环将执行5次。也就是说，循环块中的代码是否检查了控制台中的错误？？您希望看到什么？它实际上会循环5次，即使使用您的代码也是如此。它只是在上一个三角形上画了相同的三角形。我认为这不必要地使解决方案复杂化，它无法解决循环确实运行了5次，并且由于数组维度太小，它在自身顶部重复绘制三角形的问题。我认为这不必要地使解决方案复杂化，对解决问题没有任何影响解决这个事实：循环确实运行了5次，并且由于数组尺寸太小，它在自身顶部重复绘制三角形。