javascript - 求助canvas绘制半透明的马赛克？

Question

我的需求是提供给用户使用鼠标给上传的证件涂抹马赛克，我的思路是给canvas绑定鼠标事件，沿着用户的鼠标按压路径，将一张半透明的png不停的绘制到证件上，现在我不想用半透明的Png叠加，想直接用canvas生成马赛克，求皇军带路！

Answer 1

算法应该并不难：

1. 将 canvas 区域区分为形如 100x100 的网格

2. 每次鼠标事件，判断鼠标位于哪个网格内

3. 将该网格直接 fillRect 绘制为网格内的平均颜色（网格内全部点的 rgb 取平均，或直接取网格内某一点颜色）

这就实现了叠加马赛克的基本算法。