CanvasRenderingContext2D.globalCompositeOperation
CanvasRenderingContext2D.globalCompositeOperation
はキャンバス 2D API のプロパティで、新たな図形を描くときに適用する合成演算の種類を定めます。
キャンバスのチュートリアルの合成とクリッピングの章も参照してください。
構文
js
ctx.globalCompositeOperation = type;
type
は文字列で、使用する合成と混色モードの演算を識別します。
種類
例
合成演算の変更
この例では globalCompositeOperation
プロパティを使用して、 2 つの矩形が重なり合う部分で自分自身を除外して描画しています。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const 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);
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-globalcompositeoperation-dev |
ブラウザーの互換性
BCD tables only load in the browser
WebKit/Blink 特有のメモ
- WebKit および Blink ベースのブラウザーでは、このプロパティに加えて標準外で非推奨のメソッド
ctx.setCompositeOperation()
が実装されています。 "plus-darker"
および"darker"
は Chrome 48 で取り除かれました。代替策を探している人は、"darken"
を使用してください。
Gecko 特有のメモ
- 初期のキャンバス仕様の草案では、値として "darker" が定められていました。しかし、 Firefox はバージョン 4 で "darker" の対応をやめました (Firefox バグ 571532)。このブログ記事では、
"difference"
を使用して"darker"
に近い効果が得られることを示していますので参照してください。
関連情報
- このプロパティを定義しているインターフェイス:
CanvasRenderingContext2D
CanvasRenderingContext2D.globalAlpha