在processing.js中填充图像

Question

我正在使用一些canvas和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通道，使图像的一部分无法显示。此蒙版图像应仅包含灰度数据，但仅使用蓝色通道。遮罩图像的大小必须与应用遮罩图像的大小相同。

除了使用遮罩图像外，还可以直接指定包含alpha通道数据的整数数组。此方法对于创建动态生成的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)来应用（基于像素的）alpha蒙版，也可以使用img.blend(…)，如here所述。

Answer 3

分号＆＃39;＆＃39;在fill(b)

之后丢失了

所以它应该是fill(b);

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