HTML5画布元素的JavaScript代码将不起作用-包括一个循环

我目前正在制作一个网站，最近发现了HTML5画布的奇迹

我使用HTML5画布和JavaScript（我知道很简单）制作了一个三角形

我将在网页的每一部分后放置一个三角形，以指示用户应继续向下滚动。我将在网页上使用多个三角形，每个三角形都有不同的颜色（是的，我是这样拼写的）

所以，我想做一个函数，它使用页面上的画布元素数组来更改每个三角形的颜色。例如，第一个为蓝色，第二个为红色，第三个为黄色

以下是迄今为止的代码。
问题：它不工作！我哪里出错了？你有更好的解决办法吗？我不熟悉堆栈溢出

// declare all global variables

var allCanvasElements = document.getElementsByClassName('canvas');

var canvasArrayLength = allCanvasElements.length;

function canvasLoop() {

    // create canvas
    var c = allCanvasElements[i];
    var ctx = c.getContext("2d");

    for (i = 0; i < canvasArrayLength; i++) {
        // canvas code
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(60,0);
        ctx.lineTo(30,30);

        // selects current canvas, gives colour
        if (c == allCanvasElements[i]) {
            ctx.strokeStyle = "red";
            ctx.fillStyle = "red";
        }

        // fills and strokes the canvas
        ctx.fill();
        ctx.stroke();        
    }
}

window.addEventListener("load", canvasLoop(), false);

//声明所有全局变量
var allcanvascelements=document.getElementsByClassName（'canvas'）；
var canvasArrayLength=所有CanvasElements.length；
函数canvasLoop（）{
//创建画布
var c=所有可访问元素[i]；
var ctx=c.getContext（“2d”）；
对于（i=0；i

发帖后再仔细阅读代码，发现在声明使用“I”的循环之前，我正在使用“I”在画布数组中查找当前元素。我真傻！一个快速的改变，现在它工作得很好。现在，转到画布元素的其余部分！如果您感兴趣，这里是正确的代码-

//声明所有全局变量

var allcanvascelements=document.getElementsByClassName（'canvas'）

var canvasArrayLength=所有CanvasElements.length

函数canvasLoop（）{

//创建画布
var c=所有可访问元素[i]；
var ctx=c.getContext（“2d”）；
对于（i=0；i

}

---

addEventListener（“加载”，canvasLoop（），false）

在函数的第一行，您说

var c=allcanvassements[i]。您希望
i
此时包含什么？您希望选择哪个元素？您是否检查了
i
和
c
是否包含您期望的内容？var c=allcanvassements[i]；在函数开始时-i仍然未定义。而且，由于您从未在任何地方定义过var i，因此您使用的是全局
i
。它可能（a）来自其他代码的值太高或太低，或者（b）如果在同样使用
i
的循环中调用此函数，则会弄乱其他代码“您有更好的解决方案吗？”是的，使用图像精灵和css样式的元素，而不是在画布上绘制。但是，除了上面提到的所有其他错误之外，您还没有正确设置事件侦听器，
（“load”，canvasLoop，false）确实如此。我知道在画布上画画很有趣，但在这种情况下，这是非常无用的。
// create canvas
var c = allCanvasElements[i];
var ctx = c.getContext("2d");

for (i = 0; i < canvasArrayLength; i++) {
    // canvas code
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(60,0);
    ctx.lineTo(30,30);

    // selects current canvas, gives colour
    if (c == allCanvasElements[i]) {
        ctx.strokeStyle = "red";
        ctx.fillStyle = "red";
    }

    // fills and strokes the canvas
    ctx.fill();
    ctx.stroke();        
}