2010-07-26 3 views
3

나는 같은 2D 컨텍스트에서 다른 문자열 (source-atop, source-over 등)을 통과 루프에서 globalCompositeOperation을 사용하려고했지만 나는 파이어 폭스는 몇 가지 모양 나를 그려 보자 그 을 발견 오페라 마지막 동안.globalCompositeOperation

내 질문은 현재 에 현재 globalCompositeOperation을 (를) 사용할 수 있습니까?

답변

4

이 문제가 발생하는 이유는 선택한 모드가 브라우저에서 제대로 지원되지 않기 때문입니다. globalCompositeOperation과 관련하여 브라우저간에 몇 가지 문제가 있습니다.

  • 소스 꼭대기
  • 목적지 오버
  • 소스를 통해이 순간, 버릇없이 브라우저 (크롬/사파리/오페라/파이어 폭스) 사이에 작동 몇 가지 모드가 있습니다 가벼운 목적지 아웃
  • XOR

더 배울 추적을 확인하려면 링크;

http://www.rekim.com/2011/02/11/html5-canvas-globalcompositeoperation-browser-handling/

은 두번째 질문에 관해서는, 당신은 한 번에 하나 개의 모드를 사용할 수 있습니다. "light"와 "darker"는 "blend-modes"와 비슷하기 때문에 이것은 불행한 일이며, 다른 복합 모드와 함께 사용하면 매우 유용합니다. 나는이 변화를보고 싶다.

1

요컨대, 그렇습니다.

마지막 globalCompositeOperation 값은 렌더링 전에 발생합니다 (예 : drawImage(), fillRect().

당신은 같은 다음 도면에 적용 그리기 후 즉시 변경할 수 있습니다

http://jsfiddle.net/eCDRN/

ctx.globalCompositeOperation = "copy"; 
ctx.fillRect(100, 100, 100, 100); 
ctx.globalCompositeOperation = "destination-in"; 
ctx.fillRect(150, 150, 100, 100); 
ctx.globalCompositeOperation = "xor"; 
ctx.fillRect(175, 175, 100, 100);