Processing 绘图到p5.图像，而不是画布

给定一个加载的png图像作为模板，我想让用户能够跟踪图像的元素。在p5中，这很简单：

setup（）{
//加载图像
var img=loadImage（“…”）；
图像（img，0,0）；
}
画（）{
椭圆（mouseX，mouseY，2,2）；
}

但是，我希望能够只保存椭圆（而不保存底层图像）。有没有一种方法可以写入

图像

而不是直接写入画布，这样我就可以提升轨迹的像素，而不必使用原始图像

我目前的计划是：

• 覆盖第二个p5实例，并在覆盖在图像上的透明画布上绘制。。。但这似乎更难维护，并且可能会因为DOM没有完全对齐而受到影响
• 不要使用

  椭圆

  ，而是写入

  创建图像

  生成的像素阵列。。。但这似乎缓慢而令人不快

警告：图像是

p5.image

，因此覆盖在

上是不够的。

您可以使用该函数创建

p5.Renderer

的实例。然后可以绘制到

p5.Renderer

，然后将其覆盖在图像顶部。然后，您可以访问

p5.Renderer

的像素阵列，只获取覆盖，而不是图像

以下是一个例子：

var-img；
var-pg；
函数预加载（）{
img=加载图像（“https://www.gravatar.com/avatar/06ce4c0f7ee07cf79c81ac6602f5d502?s=32&d=identicon&r=PG");
}
函数设置（）{
createCanvas（300600）；
pg=createGraphics（300300）；
}
函数mousePressed（）{
pg.fill（255,0,0）；
椭圆（mouseX，mouseY，20,20）；
}
函数绘图（）{
图像（img，0，0，300，300）；
图像（pg，0，0）；
图像（pg，0300）；
}

在图像中单击以绘制到其下方的缓冲区！（查看整个页面以查看缓冲区） AHA-中间的时间是我得到的。谢谢你的编辑，顺便说一句@j6m8没问题。我已经编辑了我的示例，以便更紧密地符合您的需求。现在，它加载一个图像，创建一个覆盖，绘制到覆盖，然后在图像的顶部和下面绘制覆盖。听起来是个有趣的项目，祝你好运！