HTML5 globalCompositeOperation 대 ​​클립

Question

큰 원본 이미지가 있고 원 안의 캔버스 부분을 투명하게 유지하면서 원 안에 작은 섹션을 표시하고 싶습니다.

Mozilla guide to Compositing with HTML5은 globalCompositeOperation과 clip의 두 가지 주제를 다룹니다. 두 가지 모두은 내가 원하는 것을 할 수있게 해 주므로 각 단점이 무엇인지, 어떤 것을 사용해야하는지 궁금합니다.

globalCompositeOperation에서 source-atop (또는 source-in이지만 그 중 seems buggy in WebKit)으로 설정할 수 있습니다. 그런 다음 목적지 캔버스를 검은 색 원으로 투명하게 만들고 그 위에 원본 이미지를 그립니다. 이렇게하면 원형 부분 만 채워질 것입니다.

또는 원형 경로를 그리고 clip을 사용하여 클리핑 영역을 정의한 다음 원본 이미지를 그리면 원형 부분 만 보장됩니다. (위의 모질라의 페이지는 별들과 거의 비슷한 예제를 가지고 있습니다.)

1. 이 두 기술은 모두 내가 말하는 것처럼 작동합니까, 아니면 뭔가 빠져 있습니까?
2. 그렇다면이 중 하나의 기술을 가진 주요 결함이있어 다른 것보다 분명히 좋게 만들 수 있습니까?
3. 그렇지 않은 경우 일반적으로 어느 성능이 더 좋습니까?

I (순전히 추측) 것 clip 작업이 다각형 교차 할 필요가있는 반면이, 당 픽셀 수준의 조작을 적용하기 때문에 globalCompositeOperation가, 더 나은 성능을 것 상상한다. 그러나 그것은 단지 직감입니다.

Answer 1

3 월 현재 globalCompositeOperation이 모든 브라우저에서 동일하게 작동하지 않았습니다.

클립 않습니다 ... 실제로 앤티 앨리어싱을 제외하고는 슬프게 브라우저마다 다릅니다.

제 의견으로는 여기에서해야 할 일은 클립을 사용하는 것입니다. source-atop을 사용하면 매우 구체적인 상황에서 작동 할 수 있지만 설명대로 확장 할 수는 없습니다. 자신의 서클 뒤 배경을 가지고있는 것처럼 글로벌 컴포지트 방식으로 바꾸면 문제가 생길 수 있습니다.

테스트는 다음과 같습니다. 테스트 한 모든 브라우저에서 Clip이 빠르며 Firefox에서는 가 훨씬 더 빠릅니다.. 결과를 보거나 직접 시험해보십시오. here