HTML에서 마우스를 따르는 애니메이션 이미지 마스크

페이지의 커서를 '손전등'(예 : 원)으로 변경하고 빛 (원)을 지나갈 때만 이미지를 표시하려면 무엇을해야합니까? 이 문제를 해결하는 가장 좋은 방법이 될까요? CSS 클립을 사용 하시겠습니까? 하지만 사각형 만 쓸 수 있기 때문에 캔버스를 사용해야할까요? 아마도 두 이미지를 교차시키는 쉬운 방법이 있을까요?HTML에서 마우스를 따르는 애니메이션 이미지 마스크

출처

2012-06-28 scottkf

캔버스로 쉽게 할 수 있습니다.

모든 마우스 이동에

http://jsfiddle.net/gfZ5C/

, 우리는 캔버스를 지우고, 이미지를 다시 그리기, 원 컷이 직사각형의 부족 클리핑 영역을 확인하고 블랙 그릴 : 여기

은 예입니다 전체 캔버스 (클리핑 영역에서만 그리기)

의미가 있습니까?

이 효과와 유사한 효과를 얻을 수있는 방법이 인 로트가 있습니다. 당신은 또한 캔버스 마법의 비트와 함께 훨씬 더 빛나는 광원을 만들 수 있습니다. 예를 들어 여기에 내 대답을보십시오 : Canvas - Fill a rectangle in all areas that are fully transparent

출처

2012-06-29 14:14:10

나는 이것이 늦었다는 것을 깨달았습니다. 나는 당신의 대답을 사용했습니다. 그러나 나는 받아 들였습니다, 미안합니다! – scottkf

나는 모두 감사합니다! –

@SimonSarris 검은 색 대신 다른 이미지로 채우고 일종의 엑스레이 효과를 만드는 것이 매우 간단합니까? –

HTML에서 마우스를 따르는 애니메이션 이미지 마스크

답변

관련 문제