javascript - キャンバスで半透明のモザイクを描画するのに役立ちますか?

Question

私の要件は、ユーザーがマウスを使用してアップロードされたドキュメントをモザイクできるようにすることです。私のアイデアは、マウス イベントをキャンバスにバインドし、ユーザーがマウスを押したパスに沿って半透明の png をキャンバスに描画することです。証明書上で、半透明の PNG オーバーレイは使用したくありません。キャンバスを直接使用してモザイクを生成したいのですが、先導してください。

Answer 1

アルゴリズムは難しくないはずです:

1. キャンバス領域を100x100のグリッドに分割します

2. マウスイベントが発生するたびに、マウスがどのグリッドにあるかを決定します

3. fillRectをグリッド内の平均色として直接使用してグリッドを描画します(グリッド内のすべての点のRGBを平均するか、グリッド内の特定の点の色を直接取得します)

これは、重ね合わせモザイクの基本アルゴリズムを実装します。