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

云罗郡主
풀어 주다: 2018-10-20 15:56:02
앞으로
3332명이 탐색했습니다.

이 글의 내용은 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)을 나타냅니다.

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

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

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

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



표 4-5 globalCompositeOperation 속성 값 및 의미
Operation Meaning# 🎜 🎜#

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

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!