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

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

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

问题是，我该怎么做呢。通过观察，我了解到我可以通过

getImageData

从

canvas

获取字节。但这需要一个连接到DOM的画布和一个

drawImage

调用。这是正确的吗？有没有一种方法可以在不画画的情况下加载字节

然后我想使用putImageData方法在屏幕上绘制动画像素。。。？例如，逐行或某些过渡效果。。。 但首先…如何在不显示的情况下加载一个“准备我的像素”

---

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

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

下面是一个示例，其中视频被绘制到一个脱离DOM的画布上（它位于本文最后一部分的某个地方。搜索“backing”）。然后将其像素数据“刮取”以进行操作，然后再将其吐到可见画布上

---

在将图像绘制到画布之前，请确保已加载图像。

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

下面是一个示例，其中视频被绘制到一个脱离DOM的画布上（它位于本文最后一部分的某个地方。搜索“backing”）。然后将其像素数据“刮取”以进行操作，然后再将其吐到可见画布上

在将图像绘制到画布之前，请确保已加载图像