如何扭曲的图像创建使用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.

＆NBSP; ＆NBSP; ＆NBSP; ＆NBSP; ＆NBSP; ＆NBSP; ＆NBSP; ＆NBSP; ＆NBSP; ＆NBSP; ＆NBSP;

                     

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