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