2012-09-07 5 views
4

HTML5 캔버스를 사용하여 모션 블러 효과와 같은 효과를 내기 위해 노력하고 있습니다.HTML5 캔버스 모션 블러 효과?

기본적으로 내가하려는 것은 사진을 찍고 사진을 찍을 때와 같이 "빨리 감기"처럼 보이게하는 것입니다.

+1

이 질문은 캔버스에 국한되지 않습니다. 당신이 찾고있는 것은 모션 블러 효과를 생성하는 픽셀 조작 알고리즘입니다. – korona

+0

가능한 복제본 : http : //stackoverflow.com/questions/9638763/how-to-apply-a-motion-blur-in-javascript-jquery –

답변

4

다양한 흐림 알고리즘을 구현 한 캔버스 용 라이브러리가 여러 개 있습니다. EaselJS은 알 수 있듯이 x 축 및 y 축 블러 링을 독립적으로 구현했습니다. in this sample.

모두 libray에서 x 축 흐림 효과를 원할 수 있습니다.

0

나는 그 반대 문제를 가지고 이곳에 왔습니다. 이미지 크기를 조절할 때 흐림 효과를 제거하려고했습니다. 다행히도, 제 문제는 당신의 문제에 대한 간단한 해결책으로 이어집니다. 또한 무거운 리프트는 API에 의해 수행되므로 효율적입니다.

이미지를 더 작은 해상도의 캔버스에 그려 넣은 다음 크기를 조정하면 흐린 이미지가 표시됩니다. 나는 많은 브라우저에서 이것을 시도해 보았고, 같은 것을 사용하는 것으로 보인다. This question은 브라우저 및 향후 버전에서이 기술의 일관성에 대해 우려하는 경우 브라우저가이 흐림 동작을 사용하는시기와 이유를 조사합니다.

canvas.drawImage의 이미지 인수는 다른 캔버스를 허용합니다. 중간 캔버스에 이미지를 그릴 때 한 축을 따라 작은 해상도를 사용해 볼 수 있습니다. 그런 다음 원래 크기로 다시 크기를 조절하면 흐림 효과는 기본적으로 한 축을 따라야합니다.

저는 이미지 전문가가 아니므로 모션 블러를 최적의 방법으로 사용하는 방법을 모르지만 (한 축을 따라야하는지 여부는 모르겠다), 약간의 재미와 연구로이 기법을 사용할 수 있습니다. 원하는 효과를 얻으십시오.

희망이 있습니다.