Javascript 像Photoshop Free Transform>；弯曲

我计划用HTML5画布构建一些奇特的笔记本页面撕裂动画效果。虽然我对HTML5画布不熟悉，但我对Javascript并不陌生。看起来一点也不复杂。浏览了很多教程之后，我不知道如何获得类似的功能，比如Photoshop的免费Transform Warp。我的想法是绘制整个页面，然后，对于每个动画帧，使用某种扭曲以不同的方式进行转换。这是否可以通过转换方法实现，或者我必须为此编写自己的方法？看到这张我很快被画出来的扭曲的屏幕截图：

---

您可能想知道为什么不使用二次曲线绘制自定义形状？嗯，我想把渐变图案也包起来。所以我想画一个普通的页面，然后用某种扭曲的方式对其进行变换，扭曲网格..

我一直在考虑采用贝塞尔曲线算法，并使用get/create/putImageData方法将其应用于每一行像素，但再想想，这会非常慢，因为对于动画的每一帧，必须计算每个像素。而且，我没有办法使用硬件加速功能。至少据我所知不是这样。正如所料，这种转化方法是一种缓慢的方式。如果有人感兴趣，我可以把我的演示放在网上。有人知道怎么做吗？我越来越多地考虑对每个垂直的像素线使用DOM元素，并使用相同的贝塞尔曲线来定位它们。虽然我不知道一些浏览器在800+DOM元素被转换时会有什么反应。@rebel desginer这个q/a很老了，你有没有这样的运气？几年后，网络上仍然没有合适的例子，即使是webgl。