繪製到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標籤。