在 Processing.js 中屏蔽 alpha 通道 - 在画布中制作透明区域答案

【问题标题】：Masking the alpha channel in Processing.js - making transparent areas in canvas在 Processing.js 中屏蔽 alpha 通道 - 在画布中制作透明区域
【发布时间】：2013-07-02 23:10:43
【问题描述】：

我正在使用 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

我得到的结果：

【问题讨论】：

标签： transparency processing blend processing.js

【解决方案1】：

您的setup()上方缺少这一行

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

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

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

【讨论】：

这不是我在说的：) 我的画布是透明的，我说的是从矩形中切出圆形。所以假设我有这样的像素图：XXXXX where X is color(0,0,0,255) 我有这个：ABBA 其中A和B是不同的颜色。我想做这样的操作，会导致XOOX where O=color(0,0,0,0)。
哦，我明白了.. 为此，您应该使用 DARKEST 而不是 MULTIPLY，因为您只希望圆圈的颜色“成功”吗？ DARKEST - only the darkest colour succeeds: C = min(A*factor, B) 但是，它没有做它应该做的事情，看起来blend 不适用于PGraphics??我认为当 alpha 值起作用时它会变得混乱.. 否则它似乎工作正常。