在processing.js图像补

Question

我与一些帆布和processing.js工作，但我无法弄清楚如何填补圆弧/椭圆等与图像。

使用JavaScript通常我做这样的事情：

ctx.save();
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2, true);
ctx.closePath();
ctx.clip();
ctx.drawImage(thumbImg, 0, 0, 400, 400);

ctx.beginPath();
ctx.arc(x, y, size, Math.PI * 2, true);
ctx.clip();
ctx.closePath();
ctx.restore();

而游戏就结束了，我怎么能与processing.js办呢？

我已经试过那些选项，但似乎我做错了什么：

b = loadImage("nicola.png");
fill(b)
background(b);
ellipse(x, y, size, size);

任何想法？

Answer 1

我相信，你想获得什么叫image masking掩蔽的例子

描述：

从通过加载另一个图像并使用它作为一个alpha通道显示图像的掩模的一部分。此掩模图像应该只包含灰度数据，但只有蓝色通道被使用。掩模图像需要是大小为其所施加的图像相同。

除了使用掩模图像，含有α通道数据一个整数阵列可以直接指定。此方法是用于创建动态生成阿尔法掩模有用。这个阵列必须是相同的长度作为目标图像的像素阵列的，并应包含0-255之间的值的唯一灰度数据。

---

例：

var g2;
var setup = function(){
  createCanvas(200,200);
  background(0, 0, 0, 0);
  smooth();

  fill(255, 255, 255);
  ellipse(100, 100, 200, 200);

  var g1 = get(0, 0, 200, 200);
  background(0, 0, 0, 0);
  noStroke();
  for(let i = 0; i < 360; i++){
    fill(sin(radians(i))*255, i, 200);
    rect(0, i, 200, 1);
  }
  g2 = get(0, 0, 200, 200);
  g2.mask(g1);
}

var draw = function(){
    background(255, 255, 255);
    image(g2, 0, 0);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

上述代码返回什么的图像：

Answer 2

既可以使用img.mask(maskImg)以应用（基于像素的）α-掩模或使用img.blend(…)如例如描述here。

Answer 3

分号“;” fill(b)后丢失

所以它应该是fill(b);

我希望这能解决你的问题。