1

我正在学习 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()零件放在绘图函数中，我可以得到正确的颜色，但是一次只能看到一个圆圈。

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

我想我错过了一些简单的东西，请帮忙。

4

2 回答 2

2

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

于 2021-08-01T16:50:41.530 回答
0

我也是，虽然这img.get(mouseX, mouseY);会起作用，@mevfy-y 也说过，所以它可能会起作用？！

于 2021-09-01T07:07:49.333 回答