이미지로 캔버스를 마스크하십시오.

Question

상황입니다. 콘텐츠를 뒤에 표시하려면 "튄 자국"효과를 적용해야합니다 (신체 배경 이미지 또는 Google지도). 실제 내용 위에 캔버스를 겹쳐서 표시 할 생각입니다. 캔버스는 처음에는 불투명 한 (흰색) 배경을 갖습니다. 그런 다음 기본 이미지를 표시하기 위해 스플래터 이미지와 interval으로 마스크 처리합니다. 보다 유연한 형태를 들면, http://jsfiddle.net/VqCbv/43/ 그러나, 마스크 내가 마스크 실제 이미지를 사용하여 어떻게 든 코드를 수정할 수 있습니다 fillRec 및 createLinearGradient 함께 그려진 :

나는 비슷한 무언가를이 바이올린을 발견했습니다?

미리 감사드립니다.

Answer 1

"튀다"로 이미지를 만들고로드해야하기 만하면됩니다. 그럼 당신은 destination-out에 캔버스의 구성 모드를 설정하고 단순히 캔버스 위에 이미지를 그릴 :

ctx.globalCompositeOperation = 'destination-out'; 
ctx.drawImage(img, 0, 0); 

무엇이 일어날하면 이미지에있는 모든 픽셀이 지역을 떠나 캔버스에 픽셀을 제거하는 것입니다 이미지가 투명한 영역에 있습니다. 다른 픽셀 (흰색)은 손상되지 않습니다.

데모 (튄에 캔버스를 클릭) :
http://jsfiddle.net/AbdiasSoftware/4A4Qv/

당신이 구멍이 배경이 표시되도록 캔버스에 펀칭 볼 수 있듯이.