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
私が得る結果: