本文介绍了如何使用canvas结合贝塞尔曲线实现静态图像的变形，并将其转换为动态效果。通过分析变形思路，包括图像拆分、移位和合并，详细讲解了动态效果的生成过程。此外，讨论了两种动态效果合成方法的优缺点，并提供相关canvas教程链接。
写在最前
在之前的这篇bezierMaker.js——N阶贝塞尔曲线生成器的文章中我们提到了对于高阶贝塞尔公式的绘制与生成。不过更多的童鞋看到后可能会不知道其使用场景是什么。故作者本次分享一下基于bezierMaker.js实现的将静态图片按照自定义曲线轨迹扭曲图片并合称为动态效果。
欢迎关注我的博客，不定期更新中——
效果预览
之前的描述可能不是很清楚我们直接看下效果图：
首先加载一张图：
然后通过bezierMaker.js提供的试验场功能来绘制一段曲线，进行图片扭曲：
最后拟合为动态图：
再来一个竖直方向的扭动：
图像变形实现思路
- 绘制一条由bezierMaker.js生成的贝塞尔曲线，以此来掌握曲线各点的准确坐标值
- 确定扭曲方向为横向或纵向
- 根据该方向的基准线（图中的灰色线）来计算本次绘制的曲线与基准对比的偏移量，按照该方向每隔1px记录一个值
- 将图像数据按照选定方向进行切分，将一个一维数组imgData.data变为一段一段有方向的二维数组
- 将每段数组按照之前
最低0.47元/天 解锁文章
3437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
