1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: CanvasRenderingContext2D.globalCompositeOperation
slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation
tags:
- API
- Blending
- Canvas
- CanvasRenderingContext2D
- Compositing
- Property
- Reference
translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D.globalCompositeOperation</strong></code>プロパティは、新たな図形を描くときに適用する合成処理の種類を定めます。種類は文字列で、合成やブレンドモードのいずれが用いられるのかを決めます。</p>
<p>なお、<a href="/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>の<a href="/docs/Web/API/Canvas_API/Tutorial/Compositing">Compositing and clipping</a>の章をご参照ください。</p>
<h2 id="構文">構文</h2>
<pre class="syntaxbox"><var><em>ctx</em>.globalCompositeOperation = 種類;</var></pre>
<h3 id="種類">種類</h3>
<p>{{EmbedLiveSample("Compositing_example", 750, 7300, ""
,"../../ja/docs/Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p><p>
</p><h2 id="例">例</h2>
<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property"><code>globalCompositeOperation</code>プロパティの使い方</h3>
<p>つぎに抜き書きした簡単なコードは、描かれたふたつの矩形の重なりを<code>globalCompositeOperation</code>プロパティによって除いています。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight[4]">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
</pre>
<p>以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。</p>
<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px;">
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);</textarea>
</pre>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 380) }}</p>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状況</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('Compositing')}}</td>
<td>{{Spec2('Compositing')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
<p>{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}</p>
<h2 id="WebKitBlinkについての注釈">WebKit/Blinkについての注釈</h2>
<ul>
<li>WebKit-とBlink-にもとづくブラウザでは、このプロパティのほかに標準でなく推奨されないメソッド<code>ctx.setCompositeOperation()</code>が実装されています。</li>
</ul>
<h2 id="Geckoについての注釈">Geckoについての注釈</h2>
<ul>
<li>初期のCanvas仕様の草案には、値として"darker"が定められていました。しかし、Firefoxはバージョン4で"darker"を除きました({{bug(571532)}}). なお、"darker"に近い効果が得られる値として<code>difference</code>を使うことについて、<a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">ブログ記事</a>の紹介が参考になります。</li>
</ul>
<h2 id="参考情報">参考情報</h2>
<ul>
<li>インタフェースを定義する{{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li>
</ul>
|
