Question

我正在学习 p5.js。每次我移动鼠标时，我都尝试使用以下代码绘制一个圆圈，填充颜色根据图像的颜色而变化。

let img;

function setup() {
  createCanvas(400, 400);
loadImage('https://upload.wikimedia.org/wikipedia/commons/e/ef/Hayao_Miyazaki.jpg', img => {
    image(img, 0, 0);
  });
  noStroke();
}

function draw() {
  let c = get(mouseX, mouseY);
  fill(c);
  circle(mouseX, mouseY, 30);
}

但它似乎从画布中获取颜色，而不是从图像中获取。正因为如此，如果你移动鼠标的速度不够快，颜色根本不会改变，即使你这样做，颜色的数量也会更加有限，换句话说，这不是我想要的。

如果我将 loadImage() 部分放在 draw 函数中，我可以获得正确的颜色，但一次只能看到一个圆圈。

也许我应该将图像的每个像素存储在数组中并从数组中获取值，而不使用 get()？可能吗？

我想我遗漏了一些简单的东西，请帮忙。

Answer 1

img.get(mouseX, mouseY) 从图像中获取值，而不是整个画布

如何使用 p5.js 获取图像中像素的颜色并将其用作填充颜色？

1 个答案: