투명 효과를 이미지의 일부분에만 사용하는 방법

Question

가능한지 확실하지 않습니다. 그러나 이미지가 두 개 있다고 가정 해 봅시다. 그런 다음 커서 주위에 100px 크기의 원을 갖게됩니다. 그래서 커서를 이미지 위로 움직이면 앞면 이미지 아래에있는 이미지의 일부가 표시됩니다. 따라서 원 이미지 크기가 100px 이상인 경우에만 뒷면 이미지가 숨겨져 표시됩니다.

불행히도 나는 코드를 만들 수 있는지 확실치 않아.

그러나 그것에 대해 어떤 생각이 드나요?

Answer 1

나는 실제로 보이기 위의 숨겨진 이미지를 쌓아 올려서 HTML5의 캔버스를 사용하여 마우스 커서를 추적하고 커서 아래의 원형 영역을 클립 한 다음 위에 이미지를 그립니다. 실제로 이미지의 작은 부분을 맨 위에 쌓아 놓았을 때 기본 이미지를 "드러내고"있다는 착각을 불러 일으 킵니다. 사용자가 커서를 움직일 때마다 이것을 반복하십시오.

다음은이 코딩에 유용 할 수있는 몇 가지 리소스입니다 :

HTML5 Canvas Clipping Region Tutorial

HTML5 Canvas Mouse Coordinates

스택 오버플로 : clearing circular regions from HTML5 Canvas