캔버스 이미지에 방사형 페이드를 적용하는 방법은 무엇입니까?

Question

이미지가 있습니다. 사용자가 마우스로 클릭하면 마우스 위치의 픽셀을 얻고 마우스를 클릭 한 특정 반경에서 이미지를 희미하게하고 싶습니다.

확인이 바이올린 : "http://jsfiddle.net/qFuDr/711/"

내가 마우스를 클릭 한 다음 내가 픽셀 취소 및 배경 볼 얻을 마우스를 놓습니다도

I 원활하고 원하고 또한 픽셀을 지우려면 이동 픽셀의 비율이

당신이 내 질문을 이해 희망 제거 계산할

당신은 globalCompositeOperation 및 012 활용할 수

Answer 1

37,767,411,난 당신이 <canvas> 태그를 사용하여이 작업을 수행 할 수

canvas.addEventListener('mousemove', function (event) { 
    var rect = document.body.getBoundingClientRect(), 
     x = event.pageX - rect.left, 
     y = event.pageY - rect.top; 

    context.drawImage(image, 0, 0, canvas.width, canvas.height); 

    context.save(); 
    context.globalCompositeOperation = 'destination-out'; 

    var gradient = context.createRadialGradient(x, y, 0, x, y, 500); 
    gradient.addColorStop(0, 'rgba(0,0,0,1)'); 
    gradient.addColorStop(1, 'rgba(0,0,0,0)'); 
    context.fillStyle = gradient; 

    // repeat to intensify the fade 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    context.restore(); 
}); 

Answer 2

여기 (http://jsfiddle.net/icodeforlove/T7qGh/4) 간단한 데모를했다. 특히 캔버스를 만들 수 있습니다. 그런 다음 제외하려는 영역 만 제외하는 클리핑 마스크를 만듭니다. 그런 다음 오래된 이미지를 그 안에 넣으십시오. 새 캔버스에 결과가 포함됩니다. 그런 다음 이전 캔버스를 지우고 새 캔버스에서 이미지를 그릴 수 있습니다. 그런 다음 캔버스를 버릴 수 있습니다. 클리핑 마스크를 만들 때 와인딩에주의하십시오.

개념적 단순성 외에도 이미지 데이터를 직접 수정하는 것보다이 방법의 장점은 교차 - 원점 이미지 소스에서 작동한다는 것입니다. 원본 교차 이미지는 이미지 데이터를 검사하거나 조작 할 수 없지만 원하는대로 그려지고자를 수 있습니다.