javascript - Leinwand beim Zeichnen eines durchscheinenden Mosaiks unterstützen?

Question

Meine Anforderung besteht darin, Benutzern die Verwendung der Maus zum Mosaikieren der hochgeladenen Dokumente zu ermöglichen. Meine Idee besteht darin, Mausereignisse an die Leinwand zu binden und entlang des Mausklickpfads des Benutzers ein durchsichtiges PNG zu zeichnen Ich möchte ein durchscheinendes PNG-Overlay verwenden. Ich möchte die Leinwand direkt zum Generieren von Mosaiken verwenden. Bitte gehen Sie voran!

Answer 1

算法应该并不难：

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

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

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

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