HTML5 캔버스의 여러 클릭 영역?

저는 HTML5 캔버스와 클리핑으로 엉망입니다. 사용자가 캔버스를 클릭하여 원을 잘라내어 반복하도록 할 수 있는지 궁금합니다. 따라서 본질적으로 사용자는 여러 번 클릭 할 수 있으며 여러 클립이 있습니다.HTML5 캔버스의 여러 클릭 영역?

나는 내가 원했던 것과 약간 유사하지만 작동하지 않는 몇 가지 해결책을 시도했다. http://jsfiddle.net/cnbishop/8FzuB/ :

context.save(); 

context.beginPath(); 
context.arc(mouseX,mouseY,50,50,Math.PI*2,true); 
context.globalCompositeOperation = 'destination-out'; 
context.clip(); 
context.closePath(); 
var img = new Image(); 
img.src = canvasSnowflake.toDataURL(); 

context.drawImage(canvasSnowflake, 0, 0); 

context.restore();

여기에 행동에 전체 일을 볼 수 있습니다 여기에

는 클리핑 코드입니다. 지금은 한 번 클릭하면 클립이 작동하지만 캔버스를 다시 클릭하면 새 클립을 얻을 수 있습니다. 이것은 가능한가?

출처

2011-10-25 user1013479

"이봐, 내 코드를 디버그 할 수 있니?"하고 코드는 다소 복잡합니다. 전체 응용 프로그램 대신 가능한 가장 단순한 경우로 끓여서 작동하지 않는 부분을 확인하십시오. –

사용자가 클립 할 때마다 JS에서 어떻게 든이 작업을 저장해야합니다. 다음에 사용자가 클릭하면 이전 클리핑을 검색하여 적용한 다음 새 클립 동작을 적용합니다.

기본적으로 캔버스가 이전 렌더링을 "기억할"수 없기 때문에 실행 된 순서와 동일한 순서로 기록의 모든 클리핑 작업을 다시 적용해야합니다.

질문을 올바르게 해석 했습니까?

출처

2011-10-26 16:19:29

HTML5 캔버스의 여러 클릭 영역?

답변

관련 문제