屏蔽Processing.js中的alpha通道 - 在画布中创建透明区域

Question

我正在使用Processing.js在canvas中使用透明度。阅读本教程后：

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

并基于此草图：

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

我想创建以下内容：canvas必须填充一些颜色，并且它的某些部分必须是透明的（仅在这些地方查看下面的网站）。

我认为这可以通过在MULTIPLY模式下混合PGraphics来完成。我要切断的区域用掩码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中测试过。 Kubuntu 12.04.1

我得到的结果：

Answer 1

您在setup()

上方缺少此行

parent.document.getElementById("yourDivID").setAttribute("style", "background-color:transparent; border:0px;");

这将告诉iframe的div设置为透明。

注意：请务必将"yourDivID"替换为div的真实ID。