캔버스 블러 배경

나는 캔버스에 관한 초보자를 그리고 난이 하나를 사용할 수있는 권리 솔루션을 찾기 위해 수행 절대로 검색하지 않고 많이 시도했지만했습니다 http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html 캔버스 블러 배경

가 나는 용 이미지와 함께 사용하려면를 배경이 고정되어 있으므로 흐리게 표시되지 않은 동일한 이미지를 맨 위에 놓을 수 있으며 변경 가능한 페이지를 사용하면 이미지를 교환 할 때 디자인이 바뀝니다. ...

감사를

은 내가 이것에 대한 CSS3 필터를 사용할 수있어 알고 있지만, 파이어 폭스에서 작동 나던 및 흐린 큰 이미지의 성능은 끔찍한!

blurFilter.setStdDeviation(5, 5);

이 (흐림 값이 0으로 설정되면 크롬을 싫어하지만 ... 파이어 폭스와 크롬의 최신 버전 확인을 작동하는 것 같다) : 두 인수는 숫자가 아닌 문자열 당신이 묻고있는 것이 확실하지 않습니다. 코딩이나 디자인에 도움이 필요합니까? 더 자세히 설명해주세요. – markE

코딩에 대한 도움이 필요합니다. 이 스크립트를 사용하는 방법. 나는 시도했다. 그러나 do not는 방법을 알고있다. .. l –

은 "... 나는이에 대한 CSS3 필터를 사용할 수있어 알고 있지만, 파이어 폭스에서 작동 나던"

파이어 폭스는 CSS 흐림 수행 할 수 있습니다 포함하는 SVG 파일을 포함,

먼저

: 웹 페이지

<svg xmlns:svg="http://www.w3.org/2000/svg"> 
    <filter id="gaussian"> 
     <feGaussianBlur id="myBlur" stdDeviation="5" /> 
    </filter> 
</svg>

다음에 원하는 흐림은, 일반적인 방법으로 캔버스 요소에 대한 참조, 예를 얻을

... 그리고 그것에 필터 적용 (stdDeviationX를

var blurFilter = document.getElementById('myBlur');

사용 setStdDeviation :

canvas.style.webkitFilter = 'url(#gaussian)'; 
canvas.style.filter = 'url(#gaussian)';

는 흐림 값을 변경하려면, 당신은 가우시안 블러 요소 자체에 대한 핸들이 필요합니다 , stdDeviationY) 메서드를 사용하여 흐림 효과를 변경합니다. -

2013-11-15 12:25:31 KaliedaRik

고마워! 그것은 매우 포괄적이었습니다 :) 나는 CSS3 필터가 적절한 성능을 발휘할 때까지 jquery 버전을 단기간 "해킹"했습니다. 모든 주요 (그리고 새로운) 브라우저에서 더 큰 이미지를 보니 정말 좋지 않은 것 같습니다! –

답변