如何在多个画布上同时运行setInterval()？
如何在多个画布上同时运行setInterval()？
提问于 2010-03-12 19:28:14
我有一个页面，其中有几个<canvas>元素。
我将画布ID和数据数组传递给一个函数，该函数随后获取画布信息并将数据传递给绘图()函数，该函数反过来处理给定的数据并将结果绘制到画布上。到现在为止还好。
示例数据数组；
$(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都是新手，所以如果这是显而易见的，我很抱歉，我还在摸索。非常感谢正确方向的指导！谢谢。
回答 4
Stack Overflow用户
回答已采纳
发布于 2010-03-12 19:34:26
这个问题与how closures work有关。闭包不接收数据的副本，它们接收数据的活动引用。因此，当稍后运行该函数时，它会引用i等的实时副本--这些副本在您设置调用后一直在移动。
您可以像这样修复它：
drawLater(dimensions, data, i);在其他地方定义的...with：
function drawLater(dimensions, data, i) {
setInterval(function() { draw(dimensions, data, i); }, 33 );
}这之所以有效，是因为闭包包含对drawLater参数的引用，而不是对循环中变量的引用。
单独:您不应该将画布或其ID传递到某个位置吗？
Stack Overflow用户
发布于 2010-03-12 19:34:37
draw()如何知道要使用哪个画布？我从您的代码中猜测，您使用的是全局变量ctx，它将在每次调用setup()时被覆盖。因此，您需要更改draw()并添加用作第一个参数的画布。
Stack Overflow用户
发布于 2010-03-12 19:36:29
JavaScript变量是function scoped，而不是块作用域。此外，还需要用var声明ctx，使其成为本地的，然后将其传递给draw函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2432350
复制相关文章
相似问题
腾讯云开发者
