직사각형 이미지를 캔버스에 불규칙한 모양으로 만들기

Question

웹을 한 시간 이상 검색 한 후 행운을 찾지 못했습니다.

만약 가능하다면 js 캔버스에 투명한 이미지를 어떻게 만들지 궁금하다.

예를 들어 png에서 투명한 부분을 클릭하면 스크립트는 해당 부분을 고려하지 않습니다. http://jsfiddle.net/m1erickson/tMmzc/

이 코드는 모든 픽셀에 대한 배열 포함 된 정보에 얻을 것이다 :

는 예, context.getImageData

데모를 사용하여 캔버스에 모든 픽셀에 대한 정보를 얻을 수 있습니다

Answer 1

:) 감사 캔버스 다음 data 배열이 4 연속 ELEM로 구성되어

var data=ctx.getImageData(0,0,canvas.width,canvas.height).data; 

1 픽셀에 관한 알파, 불투명도의 정보.

The data array's elements #0-3 have the top-left pixel's r,g,b,a info. 

The data array's elements #4-7 have the next rightward pixel's r,g,b,a info. 

...and so on... 

따라서 캔버스에서 마우스 위치를 지정하면 해당 픽셀의 알파 정보를 가져올 수 있습니다. 알파 값이 제로의 경우, 그 픽셀은 투명하다

마우스 아래에있는 알파 값을 읽고 투명인지를 결정합니다이 코드 :

var isTransparent = data[(mouseY*canvas.width+mouseX)*4+3]>0;