Canvasによる合成
Canvasによる合成
Canvasにより描画先に描画するときの描画方法はglobalCompositeOperationプロパティで指定します。
以下に適用例を示します。
四角が描画先にあらかじめ描画されている内容(destination)、円が描画する内容(source)です。
IE11で正常に動作したもののみ図示しています。
globalCompositeOperationプロパティ
| source-atop | 描画先の描画されている領域のみ描画されます。 |
| source-over | 描画先を上書きします。(初期値) |
| destination-out | 描画先が切り取られ透明になります。 |
| destination-over | 描画先の裏側に描画されます。 |
| lighter | 描画先とor演算して描画します。 |
| xor | 描画先と重なっているエリアは透明になります。 |