如何使图像失真的创建使用HTML5画布

Question

给定一个图像中的风效果挥旗，我需要创建图像的动画被扭曲，就好像它是一个旗帜在风中飘动，使用JavaScript和HTML5画布。

奖励：我也希望能够将此动画导出为PNG。

Answer 1

我创建了一个旗帜在风中飘动的simple example。这很丑陋，因为我画了国旗来填充画布（而不是留下用于填充标志的填充），因为我没有尝试进行反走样。 我也没有做任何尝试提供3D阴影，这将有助于效果。

我可以得到一个320像素宽的标志在Chrome V8我的机器上64fps。如果要自己测试速度，请将第59行上的fps更改为1000，并取消第63和82行的注释;它会每隔100帧向控制台输出fps信息。

这不会IE8-工作，即使有ExCanvas，因为没有机制来有访问单个像素的数据。

编辑：只是为了好玩，我已经更新了样本，以便在它们通过图像时遮蔽涟漪。

编辑2：为了更有趣，我在标记图中添加了填充（不再有裁剪），并添加了“挤压”因子，可以让标记的右侧比原始更大或更小透视）。由于它稍微降低了性能，因此我已将其上传为a separate sample。