1

Processing.jsでキャンバスの透明度をいじっています。このチュートリアルを読んだ後:

http://www.adamtindale.com/blog/processing/129/

そしてこのスケッチに基づいて:

http://www.openprocessing.org/sketch/74380

私は次のものを作成したいと思います: キャンバスはいくつかの色で塗りつぶされ、その一部は透明でなければなりません (これらの場所でのみ以下の Web サイトを表示するには)。

これは、PGraphics を MULTIPLY モードでブレンドするだけで簡単にできると考えました。切り取りたい領域は、マスク Pgraphic の色 (0,0,0,0) で塗りつぶされているため、何かを乗算した後は (0,0,0,0) のままにする必要があります。つまり、透明です。

それにもかかわらず、私はそれを機能させることができません。私が使用するコード:

PGraphics g;
void setup()
{
  size( 720, 480);
  // create the mask
  g = createGraphics(width,height, P2D);
}  

void draw()
{
  externals.context.clearRect(0,0,width,height);// part of the canvasAPI that creates a clear rect

  fill(244,90,10,40);
  rect(2,2,300,300);

  // draw the mask
  g.beginDraw();
  g.stroke(255);
  g.fill(0,0,0,0);
  g.ellipse(100,100,150,150);

  g.endDraw();

  // apply the mask to the screen
  blend(g,0,0, width,height, 0,0,width,height,MULTIPLY);
}

このコード、円形の穴 (楕円) を持つ半透明のオレンジ色の長方形になります。

私が欠けているものはありますか、それともこれは完全に間違った方法ですか?

Google Chrome と Opera でテスト済み。クブンツ 12.04.1

私が得る結果:

ここに画像の説明を入力

4

1 に答える 1