2

通常、Canvas を使用してあるシェイプを別のシェイプから切り取るには、globalCompositeOperation オプション「xor」を使用しました。

var c2 = document.getElementById('canvas').getContext('2d');
c2.globalCompositeOperation = "xor";
c2.fillRect(0, 0, 200, 200);
c2.fillRect(170, 0, 30, 30); // shape 2 is cut out from shape 1

ただし、fillStyle のアルファ値が 1 未満の場合、またはコンテキストの globalAlpha が 1 未満の場合、「切り取られた」形状は完全に見えなくなります。

具体的には、アルファが 0.5 より大きく 1 より小さい場合、より軽いバージョンの形状が表示されます。アルファが 0.5 の場合、カットアウトはまったく表示されません。alpha が <0.5 の場合、逆の結果が得られます: 切り抜かれるはずの形状は、実際には最初の形状よりも暗いです。

これはhttp://jsfiddle.net/N7aXY/2/で見ることができます。

アルファ値を変更して、さまざまな効果を確認できます。

背景形状のアルファが 1 未満の場合、形状を完全に切り取る方法はありますか?

4

1 に答える 1

1

わかりました、これは少し「ハック」ですが、とにかく行きます。

  1. 合成を XOR に設定します。
  2. 通常、shape1 から shape2 を「切り取る」ために描画します。
  3. キャンバスを保存します。
  4. 合成を通常 (ソースオーバー) に設定します。
  5. globalAlpha を目的のレベルに設定します。
  6. キャンバスをクリアして、保存した画像を再描画します。
  7. 結果: globalAlpha と globalCompositing は調和して機能します。

ここにコードとフィドルがあります: http://jsfiddle.net/utttk/1/

ctx.fillStyle="red";
ctx.globalCompositeOperation="xor";
ctx.fillRect(0,0,200,200);
ctx.fillRect(170,0,30,30);
var png=canvas.toDataURL();
ctx.globalCompositeOperation="source-over"; // "normal" compositing
ctx.globalAlpha=.2;
var image=new Image();
image.onload=function(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
   ctx.drawImage(image,0,0);
}
image.src=png;
于 2013-03-22T21:05:36.897 に答える