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

Posted 2023-03-05

【中文标题】如何使用 html5 画布扭曲图像以创建在风中飘扬的旗帜效果

【英文标题】：How to distort an image to create flag waving in the wind effect using html5 canvas

【发布时间】：2011-05-20 17:17:53

【问题描述】：

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

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

【问题讨论】：

你知道实际上只有两个浏览器支持动画PNG吗？

【参考方案1】：

我创建了一个simple example 的旗帜在风中飘扬。这很丑，因为我绘制了标志来填充画布（而不是为标志留下填充物）并且因为我没有尝试抗锯齿。 我也没有尝试提供 3D 阴影，这有助于效果。

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

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

编辑：只是为了好玩，我更新了示例，以便在波纹穿过图像时对其进行遮蔽。

Edit2：为了更有趣，我在标志绘图中添加了填充（不再剪裁），并添加了一个“挤压”因素，让您可以使标志的右侧更大或更小原件（用于透视）。由于它会稍微降低性能，因此我将其上传为a separate sample。

                

【讨论】：

最后，one final sample 展示了如何将其与您自己加载的图像（来自同一域）而不是绘制的标志一起使用。

+1 用于演示。 :) 我收回我的答案。 （您的第一个“简单示例”由于某种原因不起作用，但其他两个都很好。）

太棒了！谢谢！我知道一个伟大的头脑会解决这个问题！现在，如果只有一种简单的方法来保存这个动画，base64 编码的图像或类似的东西可能会成功...... =)

@Andres 您可以将 HTML 画布保存为 base64 encoded PNG，但这将是每帧一个数据 url，而不是动画。

好吧，您可以轻松地将数据 URL 用作（本地）加载的一系列 PNG，其中一个使用 setInterval 替换下一个，以重新创建动画。正如 Eli 指出的那样，对 MNG 的支持（很遗憾）非常稀少，因此即使您创建了一个，它也可能对您没有帮助。