绘图p5.Image代替帆布(Drawing to p5.Image instead of to c

由于加载的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.) 

更多信息可参见参考 。

顺便说有一个p5.j​​s标签。

文章来源: Drawing to p5.Image instead of to canvas