javascript - 반투명 모자이크를 그릴 수 있도록 캔버스를 도와주세요.

Question

내 요구 사항은 사용자가 마우스를 사용하여 업로드된 문서를 모자이크 처리할 수 있도록 하는 것입니다. 내 아이디어는 마우스 이벤트를 캔버스에 바인딩하고 사용자의 마우스 클릭 경로를 따라 문서에 반투명 PNG를 그리는 것입니다. 반투명 PNG 오버레이를 사용하고 싶습니다. 캔버스를 직접 사용하여 모자이크를 생성하고 싶습니다. 안내해 주세요!

Answer 1

알고리즘은 어렵지 않아야 합니다:

1. 캔버스 영역을 100x100 격자로 나눕니다

2. 마우스 이벤트가 발생할 때마다 마우스가 어느 그리드에 있는지 확인하세요

3. 그리드의 평균 색상으로 fillRect를 사용하여 그리드를 직접 그립니다(그리드에 있는 모든 점의 RGB를 평균하거나 그리드의 특정 점의 색상을 직접 가져옴)

겹친 모자이크의 기본 알고리즘을 구현합니다.