如何使用 html5 画布扭曲图像以创建在风中挥舞的旗帜效果 [英] How to distort an image to create flag waving in the wind effect using html5 canvas

问题描述

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

Given an image, I need to create an animation of the image being distorted as though it's a flag waving in the wind, using javascript and an html5 canvas.

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

Bonus: I also would like to be able to export this animation as a png.

推荐答案

我创建了一个简单示例 在风中飘扬的旗帜.这很丑陋，因为我绘制标志以填充画布(而不是为标志留下填充物)并且因为我没有尝试抗锯齿.我也没有尝试提供 3D 阴影，这将有助于效果.

I've created a simple example of a flag waving in the wind. It's ugly because I draw the flag to fill the canvas (instead of leaving padding for the flag to wave into) and because I don't make any attempt at anti-aliasing. I also didn't make any attempt to provide 3D shading, which would help the effect.

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

I can get 64fps with a 320px wide flag in Chrome v8 on my machine. If you want to test the speed yourself, change the fps on line 59 to 1000 and uncomment lines 63 and 82; it will then output fps information every 100 frames to the console.

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

This won't work in IE8-, even with ExCanvas, because there is no mechanism to access individual pixel data there.

编辑:只是为了好玩，我更新了示例以在波纹穿过图像时对其进行着色.

Edit: Just for fun, I've updated the sample to shade the ripples as they go through the image.

Edit2:为了更有趣，我在标志绘图中添加了填充(不再剪裁)，并添加了一个挤压"因子，让您可以使标志的右侧大于或小于原件(用于透视).由于它稍微降低了性能，我将其上传为一个单独的示例.

Edit2: For more fun, I added padding to the flag drawing (no more clipping) and I added a 'squeeze' factor that lets you make the right side of the flag bigger or smaller than the original (for perspective). Since it slows down the performance a little I've uploaded it as a separate sample.

           

                     

这篇关于如何使用 html5 画布扭曲图像以创建在风中挥舞的旗帜效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！