Html5 Canvas 예비 연구 노트(7) - 합성

이 글에서는 다른 두 가지 그리기 상태 값, 즉 전역 알파 값과 합성 연산을 소개합니다. 먼저 전역 알파 값을 살펴보겠습니다.

전역 알파 값은 매우 간단합니다. 🎜>argb 값의 "a" 값입니다. 차이점은 전역 알파 값이 0.0에 있어야 한다는 것입니다. (완전 투명)에서 1.0(완전 투명)으로, 이전에 언급한 "a" 값에 해당 0 ~ 255, 기본값은 1.0입니다.

다음 코드는 다음 효과를 얻습니다.

context.fillStyle = "red";
context.save();
context.globalAlpha = 0.5;
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

및 restore도 사용할 수 있습니다. >save는 fillStyle의 red 값을 유지하므로 그려지는 내용이 반투명합니다. 붉은색 정사각형과 불투명한 붉은색 정사각형.

합성 작업은 상태 값이기도 합니다

globalCompositeOperation. 다양한 값을 정의하면 주로 소스 그래픽(globalCompositeOperation 이전의 드로잉 컨텍스트) 및 대상 그래픽(globalCompositeOperation 정의 후의 드로잉 컨텍스트 먼저 살펴보세요. 코드를 실행하면 다음과 같은 효과가 나타납니다.

context.fillStyle = "red";
context.globalCompositeOperation = "source-over";
context.fillRect(50,50,100,100);
context.fillStyle = "blue";
context.fillRect(100,100,100,100);

다음은 globalCompositeOperation

:"destination-over":

일부 값은 현재
chrome

브라우저에서 지원되지 않으며 사양에서 규정해야 합니다 위 내용은 Html5 Canvas 사전 학습 노트(7) - 합성 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!