如何同时在多个画布上运行 setInterval()？答案

【问题标题】：How to run setInterval() on multiple canvases simultaneously?如何同时在多个画布上运行 setInterval()？
【发布时间】：2010-03-12 11:28:14
【问题描述】：

我有一个包含多个 <canvas> 元素的页面。

我将画布 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);  
}

这非常有效。 draw() 运行并填充每个画布。

但是 - 我需要为画布设置动画。一旦我替换了上面示例的第 8 行；

draw(dimensions, data, i);

与

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

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

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

【问题讨论】：

不是画布专家，在我看来，全球 ctx 可能是罪魁祸首。

标签： javascript jquery html canvas

【解决方案1】：

问题与how closures work 有关。闭包不会收到数据的副本，它们会收到对它的活动引用。因此，稍后运行该函数时，它会引用 i 的 live copy 等 -- 自从您设置调用以来，这些副本一直在继续。

你可以这样修复它：

drawLater(dimensions, data, i);

...在别处定义：

function drawLater(dimensions, data, i) {

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

因为闭包包含对drawLater 的参数的引用，而不是循环中的变量。

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

【讨论】：

谢谢 - 我真的需要在这里奖励 3 个被接受的答案，因为每个人都提供了帮助:)

【解决方案2】：

draw() 如何知道使用哪个画布？我从您的代码中猜想您正在使用全局变量ctx，每次调用setup() 都会覆盖该变量。所以你需要更改draw()并添加canvas作为第一个参数使用。

【讨论】：

【解决方案3】：

JavaScript 变量是function scoped，不是块范围的。您还需要用var 声明ctx 以使其成为本地，然后将其传递给绘图函数。

【讨论】：

谢谢，这对我了解实际出了什么问题非常有用。 ctx 是全球性的，这是一个明显的疏忽，只在一定程度上起作用！

【解决方案4】：

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

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

希望这会有所帮助:)

【讨论】：

尽可能避免所有形式的eval，包括隐式评估。这几乎总是可能的。我也不认为它会起作用，与 eval 分开。
无论如何这都会失败，因为您在当前范围之外使用eval，因此变量将不可用。