4/11/2010

重ねた画像の表示の仕方を指定する(globalCompositeOperation) [html5 の Canvas を使ってみる:第卌一回]

globalCompositeOperation では、この記述前に描画した矩形の上に、記述後に描画した矩形を載せた際に発生する重なり具合についてあれこれと指定できるみたいだ。

★html 側
<canvas id="globalCompositeOperation"></canvas>


★Javascript 側
onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: globalCompositeOperation で 2 次元描画を行うことの定義
  var c = document.getElementById("globalCompositeOperation").getContext('2d');

// fillStyle で緑の塗りを指定
  c.fillStyle = "rgb(0, 255, 0)";
// fillRect で塗りつぶした矩形を描画
  c.fillRect(40, 0, 20, 150);
// globalCompositeOperation の値を source-over に指定
  c.globalCompositeOperation = "source-over";
// fillStyle で青の透明度 50% の塗りを指定
  c.fillStyle = "rgba(0, 0, 255, .5)";
// fillRect で塗りつぶした矩形を描画
  c.fillRect(0, 50, 100, 20);
}


すると、こうなる。source-over では両方が描画されるので、緑と薄い青でできた十字架が描画される。重なっている部分は重ねた青の矩形(the source image)が順位として上に表示される。重ねている青い矩形は透明度を与えてあるので、重なり具合がよく判る。

確認環境:
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に source-atop にしてみる。これは重ねられた緑の矩形(the destination image)の領域のみ表示され、重なった部分は重ねた青の矩形(the source image)が順位として上に表示される。
c.globalCompositeOperation = "source-atop";

確認環境:
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に source-in にしてみる。これは重ねた青の矩形(the source image)の領域の内、重なった部分のみが表示され、表示される矩形は重ねた青の矩形(the source image)となる。青い矩形を透明にしてあるので、重ねられた側の緑色が透けて見えていないことが判る。
c.globalCompositeOperation = "source-in";

確認環境:
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境:
Safari 5.0、Chrome 5.0.375.70(両方とも重ねられた緑の矩形も表示されてしまっている)


次に source-out にしてみる。これは重ねた青の矩形(the source image)の領域の内、重なっていない部分のみが表示される。
c.globalCompositeOperation = "source-out";

確認環境:
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境:
Safari 5.0、Chrome 5.0.375.70(両方とも重ねられた緑の矩形も表示されてしまっている)


次からは source の部分を destination に変えた値を入れていく。まずは destination-over をやってみる。これも両方が描画されるが、重なった部分は重ねられた緑の矩形(the destination image)が順位として上に表示される。緑に透明度が影響していないことが判る。
c.globalCompositeOperation = "destination-over";

確認環境:
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に destination-atop にしてみる。これは重ねた青の矩形(the source image)の領域のみ表示され、重なった部分は重ねられた緑の矩形(the destination image)が順位として上に表示される。
c.globalCompositeOperation = "destination-atop";

確認環境:
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境:
Safari 5.0、Chrome 5.0.375.70(両方とも重ねられた緑の矩形も表示されてしまっている)


次に destination-in にしてみる。これは重ねられた緑の矩形(the destination image)の領域の内、重なった部分のみが表示され、表示される矩形は重ねられた緑の矩形(the destination image)となる。
c.globalCompositeOperation = "destination-in";

確認環境:
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境:
Safari 5.0、Chrome 5.0.375.70(両方とも重ねられた緑の矩形も表示されてしまっており、さらに緑の矩形に透明度が影響している)


次に destination-out にしてみる。これは重ねられた緑の矩形(the destination image)の領域の内、重なっていない部分のみが表示される。
c.globalCompositeOperation = "destination-out";

正常に動作しなかった環境:
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53(重なった部分も表示されている。透明度の影響か?)


今度は lighter にしてみる。これは両方の矩形が表示されるが、重なった部分はそれぞれの色を加算したものとなる。今回は透明度があると判りづらかったため、青の矩形の透明度をなしに、rgb(0, 0, 255) としている。さらに十字架の交差点右下に、色を加算した rgb(0, 255, 255) の矩形も一緒に描画してみた。
c.globalCompositeOperation = "lighter";

確認環境:
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に copy にしてみる。これは重ねた青の矩形(the source image)のみがそのまま表示される。
c.globalCompositeOperation = "copy";

確認環境:
Opera 10.53

正常に動作しなかった環境:
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3(全て重ねられた緑の矩形も表示されてしまっている)


最後に xor にしてみる。これは両方の矩形の領域の内、重なった部分以外が表示される。
c.globalCompositeOperation = "xor";

正常に動作しなかった環境:
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53(矩形から透明度を除くと全て正常動作を行うが、今回のように透明度を与えたると、重なった部分まで表示してしまう)


どうも、矩形に透明度を与えることで、透明度を与えられていない矩形にも影響を及ぼすのではないかという気がする。xor だけでなく、destination-atop や destination-in、destination-out においても透明度の影響を受けている。W3C の説明文中にある「opaque」は透明度についての記述ではないと思うけど。。。どうなんだろ。

W3C;
4.8.11 The canvas element — HTML 5

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.