如何使用html5画布扭曲图像以在风效果中创建旗帜
And*_*res 14 javascript css html5 animation canvas
给定一个图像,我需要使用javascript和html5画布创建一个扭曲图像的动画,好像它是在风中飘扬的旗帜.
额外奖励:我也希望能够将此动画导出为png.
Phr*_*ogz 50
我创造了一个在风中飘扬的旗帜的简单例子.它很难看,因为我绘制了标志以填充画布(而不是留下填充标志以进入波浪),因为我没有尝试抗锯齿.我也没有尝试提供3D阴影,这将有助于效果.
我可以在我的机器上使用Chrome v8中的320px宽标志获得64fps.如果您想自己测试速度,请将第59行的fps更改为1000取消注释第63和82行; 然后它将每100帧输出fps信息到控制台.
这在IE8中不起作用,即使使用ExCanvas,因为没有机制可以访问那里的单个像素数据.
编辑:为了好玩,我更新了样本,以便在它们通过图像时遮蔽涟漪.
编辑2:为了更有趣,我在标志图中添加了填充(不再剪裁)并且我添加了一个"挤压"因子,可以让你使标志的右侧比原来更大或更小(对于透视).由于它会慢慢降低性能,我将其作为单独的样本上传.
- 最后,这里是[最后一个样本](http://phrogz.net/tmp/gkheadwave.html),展示如何使用自己加载的图像(来自同一个域)而不是绘制标记. (4认同)
| 归档时间： |
|
| 查看次数： |
16931 次 |
| 最近记录： |