HTML5 캔버스를 사용하여 모션 블러 효과와 같은 효과를 내기 위해 노력하고 있습니다.HTML5 캔버스 모션 블러 효과?
기본적으로 내가하려는 것은 사진을 찍고 사진을 찍을 때와 같이 "빨리 감기"처럼 보이게하는 것입니다.
HTML5 캔버스를 사용하여 모션 블러 효과와 같은 효과를 내기 위해 노력하고 있습니다.HTML5 캔버스 모션 블러 효과?
기본적으로 내가하려는 것은 사진을 찍고 사진을 찍을 때와 같이 "빨리 감기"처럼 보이게하는 것입니다.
다양한 흐림 알고리즘을 구현 한 캔버스 용 라이브러리가 여러 개 있습니다. EaselJS은 알 수 있듯이 x 축 및 y 축 블러 링을 독립적으로 구현했습니다. in this sample.
모두 libray에서 x 축 흐림 효과를 원할 수 있습니다.
나는 그 반대 문제를 가지고 이곳에 왔습니다. 이미지 크기를 조절할 때 흐림 효과를 제거하려고했습니다. 다행히도, 제 문제는 당신의 문제에 대한 간단한 해결책으로 이어집니다. 또한 무거운 리프트는 API에 의해 수행되므로 효율적입니다.
이미지를 더 작은 해상도의 캔버스에 그려 넣은 다음 크기를 조정하면 흐린 이미지가 표시됩니다. 나는 많은 브라우저에서 이것을 시도해 보았고, 같은 것을 사용하는 것으로 보인다. This question은 브라우저 및 향후 버전에서이 기술의 일관성에 대해 우려하는 경우 브라우저가이 흐림 동작을 사용하는시기와 이유를 조사합니다.
canvas.drawImage의 이미지 인수는 다른 캔버스를 허용합니다. 중간 캔버스에 이미지를 그릴 때 한 축을 따라 작은 해상도를 사용해 볼 수 있습니다. 그런 다음 원래 크기로 다시 크기를 조절하면 흐림 효과는 기본적으로 한 축을 따라야합니다.
저는 이미지 전문가가 아니므로 모션 블러를 최적의 방법으로 사용하는 방법을 모르지만 (한 축을 따라야하는지 여부는 모르겠다), 약간의 재미와 연구로이 기법을 사용할 수 있습니다. 원하는 효과를 얻으십시오.
희망이 있습니다.
이 질문은 캔버스에 국한되지 않습니다. 당신이 찾고있는 것은 모션 블러 효과를 생성하는 픽셀 조작 알고리즘입니다. – korona
가능한 복제본 : http : //stackoverflow.com/questions/9638763/how-to-apply-a-motion-blur-in-javascript-jquery –