绘制到p5.Image而不是画布

Question

鉴于加载的png图像作为模板，我想让用户能够跟踪图像的元素。在p5中，这很容易：

 

setup() {
    // Load image
    var img = loadImage('...');
    image(img, 0, 0);
}

draw() {
    ellipse(mouseX, mouseY, 2, 2);
}

但是，我希望能够只保存 省略号（没有底层图像）。有没有办法写入Image而不是直接写到画布，这样我就可以提升轨迹的像素而不用它带原始图像？

我目前的计划是：

• 覆盖第二个p5实例，并在覆盖在图像上的透明画布上绘制...但这似乎难以维护，并且可能会因DOM未完全对齐而受到影响
• 不要使用ellipse，而是写入createImage生成的像素数组......但这似乎很慢且令人不快。

警告：图片为p5.Image，因此覆盖在<img>之上是不够的。

Answer 1

您可以使用createGraphics()功能创建p5.Renderer的实例。然后，您可以绘制到p5.Renderer，然后将其覆盖在图像上方。然后，您可以访问p5.Renderer的像素数组，以获取叠加层，而不是图像。

以下是一个例子：

var img;
    var pg;
    
    function preload() {
      img = loadImage("https://www.gravatar.com/avatar/06ce4c0f7ee07cf79c81ac6602f5d502?s=32&d=identicon&r=PG");
    }
    
    function setup(){
      createCanvas(300, 600);
      pg = createGraphics(300, 300);
    }
    
    function mousePressed(){
      pg.fill(255, 0, 0);
      pg.ellipse(mouseX, mouseY, 20, 20);
    }
    
    function draw() {
      image(img, 0, 0, 300, 300);
      image(pg, 0, 0);
      image(pg, 0, 300);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
Click in the image to draw to the buffer below it! (View as full page to see the buffer.)

可以在the reference找到更多信息。

顺便提一句p5.js代码。