H5勋章解锁波浪进度效果

想问大众点评勋章墙未解锁的勋章波浪进度效果怎么实现的？
本人首先尝试的是两张图片层叠做出解锁进度，但是这样解锁进度效果是直线，后来用canvas画图结合二次贝塞尔曲线实现了波浪效果，但是形状不是规则的进度不同波浪效果无法保持一致，并且用画图做出来的效果未解锁部分是填充的颜色，怎么能做到按像素点填充成灰阶图？