javascript - 如何使用 html5 canvas 扭曲图像以创建在风中飘扬的旗帜效果

Question

给定一张图片，我需要使用 javascript 和 html5 canvas 创建一个图像被扭曲的动画，就好像它是一面在风中飘扬的旗帜。

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

Answer 1

我创建了一个 simple example的旗帜在风中飘扬。这很丑陋，因为我绘制了旗帜来填充 Canvas (而不是为旗帜留下填充)并且因为我没有尝试抗锯齿。 我也没有尝试提供 3D 阴影，这对效果有帮助。

我可以在我机器上的 Chrome v8 中使用 320 像素宽的标志获得 64fps。如果您想自己测试速度，请将第 59 行的 fps 更改为 1000 并取消注释第 63 和 82 行；然后它会每 100 帧向控制台输出 fps 信息。

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

编辑:为了好玩，我更新了示例以在波纹穿过图像时对它们进行阴影处理。

Edit2:为了更有趣，我在旗帜绘图中添加了填充(不再剪裁)，并添加了一个“挤压”因子，使您可以使旗帜的右侧大于或小于原件(用于透视)。因为它会稍微降低性能，所以我将其上传为 a separate sample .