原文链接: canvas 水墨画效果

上一篇: pegjs 几个例子

下一篇: 学而思css动画使用

没找到前端的实现, 目前随机的话有点慢, 最好是纯圆或者规则图形的变化, 这样计算量能少很多

https://juejin.cn/post/6947700226858123271

最简单的就是mask和clippath, 但是流畅度可能差点, clip-path用多边形随机变化, mask混合, 用生成随机云的办法了做

这里试着用canvas纯计算来

基本思想是混合, 对于起始像素, 按照从最近最相似的像素点来进行混合, 八方向即可, 这个复杂度起始挺高的, 对于大图来说可能会卡, 8*w*h 基本上2k就卡了, 起始也可以做优化, 用广搜的思路来, 这样基本上就是 8*(w+h)的复杂度了, 应该不会卡, 但是canvas的读取和写入imageData会比较慢, 这个是同步的

广搜的效果好像不是很好, 虽然加了随机, 但是最后还是方形的, 没有那种任意形状的样子

这个应该是因为使用的八方数组的期望是方的,  所以整体表现就是矩形

使用十字形方向的期望就是一个十字形

虽然使用大的随机方向, 但是计算量一下就上去了, 因为复杂度和这个多边形的周长正相关, 看来得放到shader中做了