在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

我相信你想要得到的东西被称为图像掩蔽是掩蔽的一个例子

描述：

通过加载另一个图像并将其用作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(…) ，例如此处所述。

Answer 3

分号';' fill(b)后丢失fill(b)

所以应该fill(b);

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