俺の体が透けていく。
透明度と合成。
合成ってなんなんって感じですが、先に少し言っちゃうと重なった時どうすんの?って指定です。
context.globalAlpha=opacity
透明度。opacityと同じ考えでOKです。
プロパティなので値は引き継がれる事に注意しましょう。
var canvas1 = document.getElementById('canvas01'); canvas1.width = 200; canvas1.height = 200; if (canvas1.getContext) { var context1 = canvas1.getContext('2d'); // 四角 context1.beginPath(); context1.globalAlpha = "1"; context1.fillRect(60,30,50,50); context1.stroke(); context1.beginPath(); context1.fillStyle='#ff0000'; context1.globalAlpha = "0.5"; context1.fillRect(90,30,50,50); context1.stroke(); context1.beginPath(); context1.fillStyle='#0000ff'; context1.globalAlpha = "0.8"; context1.fillRect(120,30,50,50); context1.stroke(); }
context.globalCompositeOperation=typeName
合成方法を指定してあげます。
合成方法っても結構な量があるわけで、ある分網羅してきましょ
注意点
描画後に指定してあげましょう。
つまり
描画した。重なった場合次のやつどうする?(globalCompositeOperation)
の繰り返しで指定してください。
プロパティなので値は引き継がれる事に注意しましょう。
source-over
初期値
そのまま後要素が上になる形になります。
source-atop
初期値
描画した要素に被る部分のみ表示し、その他は消えます。
source-in
初期値
描画した要素に被る部分のみ表示し、その他は消えます。