我们正在使用 HTML5 和 Canvas 技术开发集换式卡牌视频游戏(适用于台式机和移动设备，因此理想情况下必须非常适合移动设备，否则我们将不得不在这些低端设备上停用此图形功能)。
我们发现，如果我们可以在某些特定的 Canvas /场景元素上实现一些热变形(或某种水下/湍流)效果，就会为我们的俯 View 环境(关卡)增添很多生命力，比如纯草地形和植被 Prop ，以便在视觉上模拟(在某种程度上)随机动画风湍流对那些特定 Canvas /场景元素的影响(最好使用 mask ，以便仅影响预先确定的区域 Canvas )。
根据风力控制使效果变得强烈或微妙，以及对风向的控制将很容易实现。我们只需要找到一些坚实的基础来开始工作。
为了确保您正确理解我们需要的效果，请观看这些视频:http://www.youtube.com/watch?v=brcMUHPNy-Y/http://www.youtube.com/watch?v=nZtmLCaYoHc
为此，我们在 Google 上搜索了很多，但没有找到任何预制解决方案来实现这种相对简单的效果。我们希望尽可能避免使用 WebGL 和 threeJS，以及预渲染或预动画任何图形。
知道如何使用代码实现这种效果吗？
最佳答案
这是您开始性能测试的起点，但我警告说，移动设备上的湍流效应可能会消耗超出可接受范围的资源。
Almer Thie 使用 html canvas 做了一个漂亮的水波纹效果:
http://code.almeros.com/code-examples/water-effect-canvas/#.VCr6tfldV8E .
他的解决方案通过 context.getImageData 使用像素操作来实现效果。事实上，所有像素湍流效果都必须使用 .getImageData 来完成所需的像素操作。
问题是 .getImageData 从未被 GPU 优化，因此它在功率较小的设备(如移动设备)上运行速度非常慢。
您可以使用 Almers 演示作为基准来判断像素操作对于您的移动元素是否可行。我祝你一切顺利......但我担心最坏的情况:-(
关于javascript - HTML5 Canvas 中的热变形/水下视觉效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26127437/