HTML5 캔버스 합성

투명성 및 globalCompositeOperation재산 조합, 캔버스에 그래픽 렌더링 및 텍스트를 제어하는 데 사용할 수 있습니다, 합성 globalCompositeOperation허용되는 값은
copy다음과 같습니다 destination-atop, destination-in, destination-in, destination-over, destination-out, lighter, source-atop, source-in, source-out, source-over, source-over,, xor
예제 코드를 선택, "HTML5의 확실한 가이드"

<! DOCTYPE HTML> 
<HTML> 
<HEAD> 
	<TITLE> </ TITLE> 
	<스타일 유형 = "텍스트 / CSS"> 
		{선택 
			테두리 : 고체 0.5px를 #eee; 
			배경 색상 : 투명; 
		}

		캔버스 { 
			테두리 : 고체 x 1 픽셀을 #eee; 
		} 
	</ 스타일> 
</ head> 
<body> 
<캔버스 ID = "캔버스"폭 = "300"높이 = "120"> </ 캔버스>
	


	ctx.fillStyle = "lightgrey"; 	ctx.strokeStyle = "블랙"; 	ctx.lineWidth = 3;



















	VAR compVal는 = "복사";

	document.getElementById를 ( "리스트") = onchange를 함수 (E) {. 
		compVal = e.target.value; 
		무승부(); 
	}

	무승부();

	함수 연신 () { 
		ctx.clearRect (0, 0, 300, 120); 
		ctx.globAlpha = 1.0; 
		ctx.font = "100 픽셀의 산세 리프"; 
		ctx.fillText ( "안녕하세요", 10, 100); 
		ctx.strokeText ( "안녕하세요", 10, 100);

		ctx.globalCompositeOperation = compVal;

		ctx.fillStyle = "빨강"; 
		ctx.globalAlpha = 0.5; 
		ctx.fillRect (100, 10, 150, 100); 
	} 
</ SCRIPT> 
</ BODY> 
</ HTML>

코드의 기본 효과

copy 모든 투명도 설정을 무시하고 대상에 그려진 원의 효과는 직접 적용의 효과와 유사하려 할 때
destination-atop 대신 원본 이미지의 목표 이미지를 사용, 그것은 투명성을 유지하고 보이는 부분에 겹쳐
destination-in소스 이미지 소스 이미지 애플리케이션 투명성 디스플레이에 투명하지 않은 소스 및 대상 이미지 Hello투명성의 응용 프로그램은 화상을 표시 할 위치를 대상 교차
destination-over 来源图像覆盖在目标图像上，即Hello覆盖在红色矩形上
lighter来源图像与目标图像的总和，可以看出来源图像和目标图像都有了透明效果
source-atop 目标图像图像颜色叠加到源图像Hello上
source-in 来源图像与目标图像叠加处显示来源图像和目标图像色彩
source-out 来源图像与目标图像叠加部分，来源图像Hello不透明处使其透明显示，其他位置显示目标图像
source-over 目标图像个叠加到来源图像上
xor 叠加出图像执行异或运算

原文:大专栏 HTML5 Canvas合成

추천