javascript - 求救canvas繪製半透明的馬賽克？

Question

我的需求是提供給使用者使用滑鼠給上傳的證件塗抹馬賽克，我的思路是給canvas綁定滑鼠事件，沿著使用者的滑鼠按壓路徑，將一張半透明的png不停的繪製到證件上，現在我不想用半透明的Png疊加，想直接用canvas生成馬賽克，求皇軍帶路！

Answer 1

演算法應該不難：

1. 將 canvas 區域區分為形如 100x100 的網格

2. 每次滑鼠事件，判斷滑鼠位於哪個網格內

3. 將該網格直接 fillRect 繪製為網格內的平均顏色（網格內全部點的 rgb 取平均，或直接取網格內某一點顏色）

這實現了疊加馬賽克的基本演算法。