如何使用html5画布扭曲图像以在风效果中创建旗帜

Question

鉴于图像，我需要使用javascript和html5画布创建一个扭曲图像的动画，好像它是在风中飘扬的旗帜。

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

Answer 1

我在风中挥舞着simple example旗帜。它很难看，因为我绘制了标志以填充画布（而不是留下填充标志以进入波浪），因为我没有尝试抗锯齿。 我也没有尝试提供3D着色，这有助于实现效果。

我的计算机上的Chrome v8可以获得64pps的320px宽标志。如果您想自己测试速度，请将第59行的fps更改为1000并取消注释第63和82行;然后它会每隔100帧将fps信息输出到控制台。

这在IE8中不起作用，即使使用ExCanvas也是如此，因为没有机制可以访问那里的单个像素数据。

修改：为了好玩，我更新了示例，以便在图像中显示涟漪。

Edit2 ：为了获得更多乐趣，我在旗帜绘图中添加了填充（不再剪裁），并添加了一个“挤压”因子，可让您使旗帜的右侧更大或更小原文（透视）。由于它会慢慢降低性能，我将其上传为a separate sample。