HTML 참조 매뉴얼

HTML 태그 전체

HTML: <template> 태그

HTML canvas globalCompositeOperation 속성

globalCompositeOperation 속성은 새로운 형상을 그릴 때 적용할合成操作的 유형을 설정합니다. type은 사용할合成或混合模式操作的 문자열로 사용됩니다.

HTML canvas 참조 가이드

온라인 예제

다른 globalCompositeOperation 값으로 사각형을 그린 것입니다. 빨간 사각형은목적 이미지，파란 사각형은원본 이미지:

source-over

destination-over

JavaScript：

예제

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　globalCompositeOperation 속성 사용-기본 강의(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px　solid　#d3d3d3>
您的浏览器不支持 HTML5　canvas 태그.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";　　　　
ctx.globalCompositeOperation="source"-over";
ctx.fillRect(50,50,75,50);　　　　
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.fillStyle="blue";　　　　
ctx.globalCompositeOperation="destination"-over";
ctx.fillRect(180,50,75,50);　　　　
</script>
</body>
</html>

테스트를 보자 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome 및 Safari가 globalCompositeOperation 속성을 지원합니다.

주의:}Internet Explorer 8 이전 버전은 <canvas> 요소를 지원하지 않습니다。

정의와 사용법

globalCompositeOperation 속성은 하나의 원본(새로운) 이미지를 목적(기존) 이미지에 어떻게 그려넣을지 정의합니다。

원본 이미지 = 캔버스에 그려넣으려는 그림입니다。

목적 이미지 = 그림을 그려넣은 캔버스입니다。

기본 값：	source-over
JavaScript 문법：	context.globalCompositeOperation="source-in";

속성 값

값	설명
source-over	기본적으로목적 이미지위에 표시됩니다원본 이미지。
source-atop	에서목적 이미지위에 표시됩니다원본 이미지。원본 이미지위치목적 이미지밖의 부분은 보이지 않습니다。
source-in	에서목적 이미지에서 표시됩니다원본 이미지。그 외의목적 이미지안에원본 이미지부분이 표시됩니다목적 이미지은 투명합니다.
source-out	에서목적 이미지밖에 표시됩니다원본 이미지。그 외의목적 이미지그 외의원본 이미지부분이 표시됩니다목적 이미지은 투명합니다.
destination-over	에서원본 이미지위에 표시됩니다목적 이미지。
destination-atop	에서원본 이미지위에 표시됩니다목적 이미지。목적 이미지위치원본 이미지밖의 부분은 보이지 않습니다。
destination-in	에서원본 이미지에서 표시됩니다목적 이미지。그 외의원본 이미지안에목적 이미지부분만 표시됩니다，원본 이미지은 투명합니다.
destination-out	에서원본 이미지밖에 표시됩니다목적 이미지。그 외의원본 이미지그 외의목적 이미지부분만 표시됩니다，원본 이미지은 투명합니다.
lighter	표시원본 이미지 + 목적 이미지。
copy	표시원본 이미지。무시목적 이미지。
xor	xor 연산을 사용하여원본 이미지와목적 이미지을 결합합니다.

온라인 예제

모든 globalCompositeOperation 속성 값:

예제

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　globalCompositeOperation 속성 사용-기본 강의(oldtoolbag.com)</title>
<style>
canvas
{
　　　　border:1px　solid　#d3d3d3;
　　　　margin-right:10px;
　　　　margin-bottom:20px;　　　　
}
</style>
</head>
<body>
<script>
var　gco=new　Array();
gco.push("source-atop");
gco.push("source-in");
gco.push("source-out");
gco.push("source-over");
gco.push("destination-atop");
gco.push("destination-in");
gco.push("destination-out");
gco.push("destination-over");
gco.push("lighter");
gco.push("copy");
gco.push("xor");
for　(n=0;n<gco.length;n++)
{
　　　　document.write("<div　id='p_"　+　n　+　"'　style='float:left;'>"　+　gco[n]　+　":<br>");
　　　　var c=document.createElement("canvas");
　　　　c.width=120;
　　　　c.height=100;
　　　　document.getElementById("p_"　+　n).appendChild(c);
　　　　var ctx=c.getContext("2d");　　　　
　　　　ctx.fillStyle="blue";
　　　　ctx.fillRect(10,10,50,50);
　　　　ctx.globalCompositeOperation=gco[n];
　　　　ctx.beginPath();
　　　　ctx.fillStyle="red";
　　　　ctx.arc(50,50,30,0,2*Math.PI);
　　　　ctx.fill();
　　　　document.write("</div>　　　　
}
</script>
</body>
</html>

테스트를 보자 ‹/›

HTML canvas 참조 가이드

HTML: <template> 태그