1

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

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

并基于此草图：

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

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

我认为这可以通过在 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 中测试。库本图 12.04.1

我得到的结果：

在此处输入图像描述

4

1 回答 1

0

您在您的上方缺少此行setup()

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

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

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

于 2013-07-02T14:59:52.200 回答