来自图像源的画布像素动画

Question

我在理解 canvas javascript api 上有一点问题。我想做的是在内存中加载两个 png，这样我就有了它们的字节数组并使用 requestAnimationFrame 循环做一些动画。

但我喜欢加载它们而不只是在内存中显示它们并访问字节以获得一些动画效果。

问题是，我将如何做这样的事情。根据我的观察，我了解到我可以通过getImageData 从canvas 获取字节。但这需要一个附加到 DOM 的画布和一个 drawImage 调用。它是否正确？有没有办法在不绘制或绘制任何东西的情况下加载字节？

然后我想使用 putImageData 方法在屏幕上绘制我的动画像素...？例如逐行或一些过渡效果...... 但首先...如何加载准备我的像素而不显示它们？

任何帮助、链接、指针都会很棒！如果我走错了路，请随时纠正我...

Answer 1

不，画布不需要在 DOM 中进行操作。您可以仅在 JavaScript 中创建画布。这就是他们通常所说的“背景画布”，通常用于在某些库中预渲染场景。

这是一个demo from HTML5Doctor，视频被绘制到一个非 DOM 画布上（它在文章的最后一部分。搜索“backing”）。然后在将其吐出到可见画布之前，“抓取”其像素数据进行操作。

只需确保在将图像绘制到画布之前已加载它。