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

【问题标题】：JavaScript code for HTML5 canvas element will not work - includes a loopHTML5 画布元素的 JavaScript 代码将不起作用 - 包括一个循环
【发布时间】：2016-01-04 21:39:50
【问题描述】：

我目前正在做一个网站，最近发现了 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 c = allCanvasElements[i];。您希望 i 在那时包含什么？您希望选择哪个元素？您是否检查过i 和c 是否包含您所期望的内容？
var c = allCanvasElements[i];在函数的开头 - i 仍然未定义。
另外，由于您从未在任何地方声明var i，因此您使用的是全局i。它可能 (a) 已经有来自其他代码的太高或太低的值，或者 (b) 如果在也使用 i 的循环中调用此函数，则会弄乱其他代码。
“你有更好的解决方案吗？” 是的，使用图像精灵和 css 样式元素，而不是在画布上绘图。但是除了提到的所有其他错误之外，您也没有正确设置事件侦听器，("load", canvasLoop, false);
确实如此。我知道在画布上画画很有趣，但在这种情况下那是毫无用处的。

标签： javascript html loops for-loop canvas

【解决方案1】：

实际上只是在发布后再次通读代码，发现我在声明使用“i”的循环之前使用“i”来查找画布数组中的当前元素。傻我！一个快速的改变，现在它工作得很好。现在，转到其余的 Canvas 元素！如果您有兴趣，这里是更正后的代码 -

//声明所有全局变量

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

var canvasArrayLength = allCanvasElements.length;

函数 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);

【讨论】：