jQuery와 HTML5 캔버스가 화면의 일부를 능동적으로 미러합니다.

Question

유리창에서 반사되는 사진 사이트에서 작업합니다. 꽤 매끄럽다.

CSS3의 box-reflect 속성을 사용하는 대신 위의 내용을 단순히 뒤집고 그라데이션 마스크가있는 문서에 캔버스 레이어를 작성하고 싶습니다. 그것은 몇 가지 이유가 있습니다

• 브라우저 호환성이
• 하찮은 일에 속 태우고 인공 물리학 ... 도크의 가장자리에, 난 단지 반사를 할 때에 (크롬 나를 죽이고 상자-반영 버그가 있습니다) 도크

나는 인터넷을 둘러 보았고 실행 한 각 이미지에 대해 캔버스 요소를 만드는 플러그인에 대한 많은 리소스를 보았지만 그 중 아무 것도 나를 위해 작동하지 않습니다.

도크 위에있는 모든 픽셀을 복사하여 위로 뒤집은 다음 슬라이드 쇼의 이미지를 옮길 때마다 미리 정의 할 이벤트를 실행하는 jQuery가 이상적입니다.

리소스를 이미 본 사람이 있습니까? 나는 미쳤고 더 좋은 길을 놓치고 있습니까? 당신의 도움을 주셔서 감사합니다!

작은 눈 사탕을위한 스크린 샷입니다. 이미지 외에 페이지의 모든 내용은 CSS입니다. 모바일 지원을 고려할 경우

http://cloud.dhut.ch/image/0F1i2T0p3i3M

Answer 1

난 당신이 그들이 캔버스 그리기보다 더 나은 작동으로 CSS 속성을 고수 건의 할 것입니다. 반면에 브라우저를 지원하려면 캔버스를 사용하여 반사를 만들 수 있습니다.

캔버스 솔루션은 어렵습니다. 기간. 하나 또는 일련의 이미지에서 반사를 만드는 지름길은 없습니다. 다음은 캔버스 반향을 만들기 위해 취할 기본 단계입니다.

1. 주어진 시간에 표시되는 모든 이미지를 반복합니다.
2. Draw 각 이미지는 숨겨진 캔버스에 있습니다.
3. 같은 기준선에있는 모든 이미지를 그린 후 전체 캔버스에서 the image data을 가져옵니다.
4. 픽셀을 반복 할 때 반복적으로 사용하여 이미지 데이터를 반복하고 뒤집기.
5. 이미지 데이터의 첫 번째 행부터 시작하여 각 픽셀의 알파 값을 한 도씩 변경하여 불투명도를 줄입니다. 그래디언트 페이드 아웃 효과가 생성됩니다.
6. 이미지 데이터를 반사 캔버스에 넣습니다.

장면에서 하나의 이미지를 변경할 때마다이 이미지를 다시 그려야합니다. 이동할 때마다 (스크롤바가있는 경우) 리플렉션을 업데이트해야합니다.

이것은 성능 측면에서 비용이 많이 든다.

CSS 리플렉션을 사용하면 하드웨어 가속화가 가능하며 브라우저가 제대로 작동 할 때 완벽하게 지원됩니다.

내 생각에, 캔버스 방식은 과도합니다.