2

お世話になります。

<div>
<canvas id="c1">
<canvas id="c2">
</div>

上記の様にcanvas要素を重ねて、c1に背景画像を描写し
c1の上にc2を設置して、この2つが重なった部分を透過した(親DIVの背景色が見える)ような状態を作成することは可能でしょうか。

1つのcanvasならばglobalCompositeOperationのsource-outで可能とは見たのですが
c2をabsolute属性で自由に配置したいので質問させていただきました。

現在この方法を調査中なので、ソースコードはまだありません・・・

1
  • 動的に重なっている領域を計算して、双方透過させるのはどうですか?
    – JSer
    Commented 2017年12月6日 2:16

1 件の回答 1

1

ひとつのcanvasに画像をずらして配置してglobalCompositeOperationはxorで実現はできるかと思います。
画像でではないですが参考になれば幸いです。

var canvas = document.getElementById('c')
var ctx = canvas.getContext('2d')

ctx.globalCompositeOperation = 'xor'
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect(20, 30, 60, 40)

ctx.fillStyle = "rgb(100, 0, 0)"
ctx.fillRect(60, 60, 60, 40)
.wrapper {
  background-color: #000;
}
<div class="wrapper">
  <canvas id="c" width="200" height="200"></canvas>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。