来自图像源的Canvas Pixel动画

时间:2013-06-11 09:16:35

标签: javascript html5 image-processing canvas html5-canvas

我有一点问题要理解canvas javascript api。我想要做的是在内存中加载两个png,以便我有他们的字节数组并使用requestAnimationFrame循环做一些动画。

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

问题是,我该怎么做呢?根据我的观察,我了解到我可以从canvas通过getImageData获取字节。但这需要附加到DOM的画布和drawImage调用。它是否正确?有没有办法加载字节而不绘制或绘制任何东西?

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

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

1 个答案:

答案 0 :(得分:3)

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

这是一个demo from HTML5Doctor,其中视频被绘制到一个非DOM画布(它位于文章的最后部分。搜索“支持”)。然后在它吐出到可见画布之前,将其“刮掉”它的像素数据进行操作。

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