绘制带有设置超时的画布上的图像

drawImage on a canvas with setTimeout

本文关键字：图像 超时 设置 绘制      更新时间：2023-09-26

我用几块画在画布上用画图构建了一个图像。

我现在想尝试以 1 个 1 的方式加载它们，或者尝试对它们进行动画处理，或者在它们最初加载后修改用于构成完整图像的片段的大小。

我无法让他们使用setTimeout函数，这甚至是一个合适的方法吗？ 还是有更好的方法？

这是我用几张图像构建的原始工作画布：https://codepen.io/anon/pen/MyaMOK

这是我尝试将它们以 1 个 1 和setTimeout加载：

setTimeout(function(){
    ctx.drawImage(img, piece.sx, piece.sy, piece.sWidth, piece.sHeight, piece.x, piece.y, piece.w, piece.h);
},100*tileCount);

https://codepen.io/anon/pen/RaWzgJ

它似乎只在右下角加载 1 个"块"，而没有其他"块"，尽管这种方法似乎在setTimeout之外工作正常。

任何人都可以提出可行的解决方案吗？

想

通了。

将setTimeout函数移到 for 循环之外，并从内部将变量传递给它，更新的工作代码笔在这里：

https://codepen.io/anon/pen/RaWzgJ

我采用了您的代码并通过在setTimeout函数之前和setTimeout函数的callback内添加console.log来修改它。

结果是循环按预期工作。每次迭代都会更新piece对象。

但是，只有在整个循环耗尽后才调用setTimeout函数，令我惊讶的是，piece对象采用了相同的值。

据我说，它之所以表现得像这样，是这样的：

  1. setTimeout函数仅注册callback函数（稍后执行），但不阻塞循环（它是异步的）。

  2. 因此，循环继续，而不会在setTimeout内执行任何回调，并且piece会从外部更新。

  3. 当循环耗尽时，callback函数开始执行。但是，所有回调都引用同一个piece对象（由于hoisting并且因为javascipt不是块范围的），因此它们都获得相同的值。

  4. 结论：所有图像片段都得到了正确的输出，但它们被输出在同一个地方，一个在另一个之上。

为什么将setTimeout放入另一个函数中有效：

将setTimeout放入另一个函数中是有效的，因为调用新函数会创建一个具有自己的piece对象的新作用域，即它不再从同一全局piece对象共享。

相关文章：