html5의 globalCompositeOperation 속성에 대한 자세한 소개

이 글의 내용은 CSS3에서 (코드 포함) background-orgin을 사용하는 방법에 관한 것입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

globalCompositeOperation의 기본 값 속성은 source-over

1입니다. Source-over이고 소스가 대상 위에 있습니다

context.fillStyle = 'aqua';
context.fillRect(50,50,100,100);//目标图形
context.globalCompositeOperation = 'source-over';
context.fillStyle = 'antiquewhite';
context.fillRect(100,100,100,100);//源图形

위 그래픽이 대상이고 아래 그래픽이 소스

2입니다. over target은 소스 위에 있습니다

3. Source-atop은 대상 위에 소스를 그리지만, 겹치는 부분에서는 둘 다 불투명하고, 다른 위치에 그려진 대상은 투명합니다

context.fillStyle = 'aqua';
context.fillRect(50,50,100,100);
context.globalCompositeOperation = 'source-atop';
context.fillStyle = 'antiquewhite';
context.fillRect(100,100,100,100);

.

4.Destination-atop과 Source-atop의 효과는 반대입니다. 겹치는 부분에서는 둘 다 불투명하지만 다른 위치에서는 소스가 불투명하고 대상이 투명합니다.

5. 소스인과 타겟이 겹치는 부분만 표시되고 나머지 부분은 투명해집니다

6. 대상인 소스와 타겟이 겹치는 부분만 표시되고 나머지 부분은 투명해집니다

7. Source-out은 소스의 겹치지 않는 부분만 표시하고 다른 부분은 표시하지 않습니다.

8. Destination-out은 소스의 겹치지 않는 부분만 표시하고 다른 부분은 표시하지 않습니다

9 .라이터 값은 순서와 상관이 없습니다. 원본과 대상이 겹치는 경우 두 가지 색상 값을 더하면 최대 색상 값인 255를 얻을 수 있습니다. 값은 흰색입니다

10, 복사는 원본만 복사합니다.

11, 소스와 타겟 중 겹치지 않는 부분만 복사하고, 겹치는 부분은 투명하게 합니다.

관련 권장 사항:

HTML5의 다운로드 속성에 대한 자세한 소개

H5 사용에 대한 자세한 소개 유연한 상자 레이아웃(상위 컨테이너 속성)

위 내용은 html5의 globalCompositeOperation 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!