Javascript 如何在多个画布上同时运行setInterval（）？

我有一个页面有几个

元素

我将画布ID和数据数组传递给一个函数，然后该函数获取画布信息，并将数据传递给draw（）函数，该函数依次处理给定的数据并将结果绘制到画布上。到目前为止，一切顺利

示例数据阵列

$(function() {
    setup($("#canvas-1"), [[110,110,100],
                          [180,180,50],
                          [220,280,80]]);

    setup($("#canvas-2"), [[110,110,100],
                          [180,180,50],
                          [220,280,80]]);
});

设置功能

function setup(canvas, data) {
    ctx = canvas[0].getContext('2d');
    var i = data.length;
    var dimensions = {
        w : canvas.innerWidth(),
        h : canvas.innerHeight()    
    };
    draw(dimensions, data, i);  
}

这很好用<代码>绘制（）运行并填充每个画布

然而，我需要动画画布。一旦我替换了上面示例的第8行

draw(dimensions, data, i);  

与

它停止工作，只绘制最后一个画布（其他画布保持空白）

---

我对javascript和canvas都是新手，如果这是一个明显的问题，我很抱歉，我仍然在摸索。非常感谢正确方向的指导！谢谢。

如果您尝试以下方法，我认为您应该能够使它工作：

setInterval( 'draw(dimensions, data, i);', 33 );

---

希望这对您有所帮助：）

我认为如果您尝试以下方法，您应该能够使其正常工作：

setInterval( 'draw(dimensions, data, i);', 33 );

---

希望这能有所帮助：）

这个问题与。闭包不接收数据的副本，而是接收对它的活动引用。因此，当函数稍后运行时，它会引用

i

等的一个实时副本，这些副本在您设置调用后一直在移动

您可以这样修复它：

drawLater(dimensions, data, i);

…其他地方对此进行了定义：

function drawLater(dimensions, data, i) {

    setInterval(function() { draw(dimensions, data, i); }, 33 );
}

这是因为闭包引用了

drawLater

的参数，而不是循环中的变量

---

单独：您不应该将画布或其ID传递到某个地方吗？

问题与此有关。闭包不接收数据的副本，而是接收对它的活动引用。因此，当函数稍后运行时，它会引用

i

等的一个实时副本，这些副本在您设置调用后一直在移动

您可以这样修复它：

drawLater(dimensions, data, i);

…其他地方对此进行了定义：

function drawLater(dimensions, data, i) {

    setInterval(function() { draw(dimensions, data, i); }, 33 );
}

这是因为闭包引用了

drawLater

的参数，而不是循环中的变量

---

单独：您不应该将画布或其ID传递到该位置吗？

如何知道使用哪个画布？我从您的代码中猜测您正在使用全局变量

ctx

，每次调用

setup（）

都会覆盖该变量。因此，您需要更改

draw（）

并添加画布作为第一个参数。

如何知道使用哪个画布？我从您的代码中猜测您正在使用全局变量

ctx

，每次调用

setup（）

都会覆盖该变量。因此，您需要更改

draw（）

，并添加画布以用作第一个参数。

JavaScript变量的作用域是块，而不是块。您还需要使用

var

声明

ctx

，使其成为本地的，然后将其传递给draw函数

JavaScript变量不受块范围限制。您还需要使用

var

声明

ctx

，使其成为本地的，然后将其传递给draw函数

不是画布专家，我觉得全局ctx可能是罪魁祸首。不是画布专家，我觉得全局ctx可能是罪魁祸首。尽可能避免所有形式的

eval

，包括隐式eval。这几乎总是可能的。我也不认为它会工作，与eval分开。无论如何，这都会失败，因为您使用的

eval

超出了当前范围，因此变量不可用。尽可能避免所有形式的

eval

，包括隐式eval。这几乎总是可能的。我也不认为它会起作用，与eval分开。这无论如何都会失败，因为您使用的

eval

超出了当前范围，因此变量不可用。谢谢-我真的需要在这里奖励3个公认的答案，因为每个人都提供了帮助：）谢谢-我真的需要在这里奖励3个公认的答案，因为每个人都帮了忙：）谢谢，这对我理解到底出了什么问题非常有用。ctx的全球化是一个明显的疏忽，只起到了一定的作用！谢谢，这对我理解到底出了什么问题非常有用。ctx的全球化是一个明显的疏忽，只起到了一定的作用！