더 나은 캔버스 모션 블러

Question

그랬어요 전에 물어봤어, 그러나 허용된 솔루션은 저에게 작동하지 않으며(말 그대로 연결된 데모에서는 아무것도 흐려지지 않습니다) 두 개의 캔버스 요소와 관련된 약간의 문제입니다.

저는 현재 "가난한 사람의" 모션 블러 기술을 사용하고 있습니다. 기본적으로 소스 이미지를 캔버스에 계속해서 블릿팅하고 각 반복 후에 배경과 동일한 색상의 반투명 직사각형을 맨 위에 놓는 작업이 포함됩니다.

데모는 다음과 같습니다. http://jsfiddle.net/YmABP/

보시다시피 이미지 가장자리에는 잘 작동하지만 이미지 내부 부분은 전혀 흐려지지 않고 부분적으로 투명한 이미지에서는 형편없어 보입니다.

모션 블러를 위한 더 나은 기술이 있습니까?이상적으로는 다음과 같은 일을 할 수 있기를 바랍니다. context.drawImage 불투명도 매개변수를 전달하지만 AFAIK에는 이와 같은 것이 없습니다.일부 이미지는 제3자 도메인에서 호스팅될 수 있으므로 개별 픽셀 데이터에 액세스할 수 없습니다.문제가 생기면 이미지를 서버로 가져온 다음 각 픽셀을 반복하여 반투명한 작은 직사각형으로 그릴 수 있지만 이는 과도한 것처럼 보입니다.

원격 이미지에 사용할 수 있는 더 나은 모션 블러 솔루션을 아는 사람이 있습니까?

이것이 문제가 될지는 의심스럽습니다. 하지만 현재의 목적으로는 상황이 위쪽으로만 움직일 뿐입니다.

Answer 1

그냥 설정하세요 globalAlpha 이미지를 반복적으로 그리기 전에 컨텍스트의 속성:

데모: http://jsfiddle.net/qfEUt/

var img = new Image,
    ctx = document.querySelector('canvas').getContext('2d');
    ctx.globalAlpha = 0.1;

img.onload=function(){
  for (var y=0;y<10;++y) ctx.drawImage(img,0,y);
}
img.src = 'http://phrogz.net/tmp/gkhead-small.png';​

Answer 2

시도해 보셨나요? 이젤JS 그리고 그것의 블러 필터 - 한 방향(x 또는 y)으로 흐림 효과를 변경하거나 애니메이션을 적용해 보세요.