2011-02-02 5 views
6

저는 html5 캔버스를 사용하고 있습니다. 게임에 얼굴을 업로드하고 주요 캐릭터로 사용할 수있게되어서 게임을 만들고 있습니다. 불행히도, 게임의 캐릭터는 웃는 얼굴처럼 원형입니다.캔버스에서 원형 이미지 잘라 내기

이렇게하면 어떻게 될까요?

사진을 찍고 원을 잘라 내면 원 밖의 모든 것이 투명 해 집니까? 그렇다면 어떻게 될까요?

답변

6

클리핑 패스를 만들고 싶습니다. 이 경로는 원의 외부의 모든 클립됩니다

ctx.save(); 

ctx.beginPath(); 
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath(); 
ctx.clip(); 

// draw the image 

ctx.restore(); 

그래서이 캔버스에 그릴 다음 일은 (들)만을 클리핑 패스의 내부에 표시됩니다.

이전과 이후의 컨텍스트를 저장하고 복원하고자 할 것입니다.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#Clipping_paths

: 여기

는 주제에 조금 더
관련 문제