캔버스 위로 이동하기 전에 이미지를 흐리게 처리합니다.

Question

저는 캔버스에서 움직이는 이미지에 대해 가우시안 흐림 효과를 얻으려고합니다. 이미지를 캔버스에 렌더링하기 전에 이미지를 흐리게 처리 할 수 ​​있습니까?

이 이미지는 정적 인 상태로 남아 있지 않으며 원본 이미지를 흐리게 처리 할 수 ​​없도록 동일한 이미지의 여러 크기를 렌더링해야합니다.

아이디어가 있으십니까?

Answer 1

원하는 크기의 사전 렌더링 된 흐린 이미지를 쉽게 얻을 수 있습니다!

• 오프 스크린 캔버스를 만들 : document.createElement('canvas');

• 을 오프 스크린 캔버스에 원하는 다양한 크기의 이미지를 그릴 : drawImage with sizing parameters

• 전체 오프 스크린 캔버스를 흐리게 흐림 프로그램을 사용

  를

  http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

• 는 spritesheet 같은 오프 스크린 캔버스를 사용하고 당신이 필요로하는 중 크기 이미지 '컷'하고 화면의 캔버스로 컷 이미지를 그릴 : 다시 사용을 drawImage with sizing parameters

는