javascript - 在 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 channel 来屏蔽图像的一部分。此蒙版图像应仅包含灰度数据，但仅使用蓝色 channel 。蒙版图像需要与应用它的图像大小相同。

除了使用 mask 图像外，还可以直接指定包含 alpha channel 数据的整数数组。此方法对于创建动态生成的 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>

上面代码返回的图像: