HTML5 Canvas 그래픽 구성은 어떻게 구현됩니까? 첨부코드

이 글의 내용은 HTML5 Canvas 그래픽 조합이 어떻게 구현되는지에 관한 것입니다. 특정 참조 가치가 있는 코드가 첨부되어 있습니다. 도움이 필요한 친구가 참조할 수 있기를 바랍니다.

캔버스에 복잡한 그래픽을 그릴 때 그래픽이 겹치는 경우가 많습니다. 캔버스는 그래픽의 크로스오버를 조합이라고 합니다.

컨텍스트 객체의 globalCompositeOperation 속성을 통해 그래픽 조합 방법을 설정합니다. 이 속성의 값과 그 의미는 표 4-5에 나와 있습니다. 그 중 소스는 새로 그려진 그래픽을 의미하고, 대상은 원본 그래픽을 의미합니다. 기본값은 소스 오버입니다.

source-atop (S atop D) 두 이미지가 모두 불투명한 경우 소스를 표시하세요. 영상. 대상 이미지는 불투명하지만 소스 이미지는 투명한 대상 이미지를 표시합니다. 다른 곳에서도 투명하게 표시됩니다. source-in (S in D)소스 이미지와 대상 이미지가 모두 투명한 소스 이미지를 표시합니다. 다른 곳에서도 투명하게 표시됩니다. source-out (S out D)소스 이미지가 불투명하고 대상 이미지가 투명한 소스 이미지를 표시합니다. . 다른 곳에서도 투명하게 표시됩니다. source-over(S over D, 기본값)소스 이미지가 불투명한 곳에 소스 이미지를 표시합니다. 다른 곳에 대상 이미지를 표시합니다. destination-atop (S atop D)소스 이미지와 대상 이미지가 모두 불투명한 대상 이미지를 표시합니다. 소스 이미지는 불투명하고 대상 이미지는 투명한 소스 이미지를 표시합니다. 다른 곳에서도 투명하게 표시됩니다. destination-in (S in D)소스 이미지와 대상 이미지가 모두 불투명한 대상 이미지를 표시합니다. 다른 곳에서도 투명하게 표시됩니다. destination -out (S out D)대상 이미지가 불투명하고 원본 이미지가 투명한 대상 이미지를 표시합니다. . 다른 곳에서도 투명하게 표시됩니다. destination -over (S over D)대상 이미지가 불투명한 곳에 대상 이미지를 표시합니다. 다른 곳에 대상 이미지를 표시합니다. lighter(S plus D)소스 이미지와 대상 이미지의 합계를 표시합니다. xor (S xor D)소스 이미지와 대상 이미지가 XOR됩니다. copy(D는 무시됨)대상 이미지가 아닌 원본 이미지를 표시합니다.

아래 그림은 globalCompositeOperation 속성의 다양한 값에서 소스 그래픽과 대상 그래픽의 효과를 보여줍니다. 그 중 빨간색 원은 소스 그래픽(S)을 나타내고 파란색 직사각형은 대상 그래픽(D)을 나타냅니다.

위 사진은 구글 크롬 브라우저 버전 41.0.2272.118에서의 효과입니다. 그러나 Chrome, Firefox, Safari, Opera, IE9 등 5개 주요 브라우저가 조합을 다르게 처리하기 때문에 조합 작업을 처리하는 것은 여전히 ​​매우 까다롭습니다. 그래픽 구성을 사용하려면 각 브라우저의 현재 지원 여부를 확인해야 합니다.

globalCompositeOperation 속성은 전역 속성이므로 사용 시 상태 저장 및 복원에 주의해야 합니다.

위는 HTML5 Canvas 그래픽 조합을 구현하는 방법입니다. 첨부된 코드에 대한 전체 소개는 Html5 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

표 4-5 globalCompositeOperation 속성 값 및 의미

Operation	Meaning# 🎜 🎜#

위 내용은 HTML5 Canvas 그래픽 구성은 어떻게 구현됩니까? 첨부코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!