示例1。
所以我试图在p5.js中制作一个精确的小比例版本的画布和精灵，并将其放入一个盒子中。有什么功能或方法可以做到这一点吗？精灵的背景、颜色和图像应该相同。
有两种方法可以做到这一点，一种方法是将所有内容绘制到p5.Graphics缓冲区，然后使用不同的目标大小将该缓冲区绘制到主画布两次。另一种方法是将绘图的主要部分直接绘制到画布上，然后使用pixels数组根据画布的内容创建p5.Image，然后使用image函数将其绘制到画布。
示例1。p5.Graphics
let graphics;
function setup() {
createCanvas(windowWidth * 0.9, windowHeight * 0.9);
graphics = createGraphics(width, height);
graphics.background(100);
}
function draw() {
graphics.ellipse(mouseX, mouseY, 50, 50);
image(graphics, 0, 0, width, height, 0, 0, graphics.width, graphics.height);
// Draw picture in picture
let aspect = width / height;
image(graphics, 10, 10, 100, 100 / aspect, 0, 0, graphics.width, graphics.height);
push();
noFill();
strokeWeight(3);
rect(10, 10, 100, 100 / aspect);
pop();
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>
<body>
</body>
</html>示例2。像素&图像
注意：此选项的缺点是更复杂、速度较慢，而且它不支持持久绘制的内容以及p5.Graphics选项，因为它会在后续帧上显示自己。
let img;
let density;
function setup() {
createCanvas(round(windowWidth * 0.9), round(windowHeight * 0.9));
density = pixelDensity();
img = createImage(width, height);
img.loadPixels();
background(100);
}
function draw() {
ellipse(mouseX, mouseY, 30, 30);
loadPixels();
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
let srcPixel = y * 4 * width * density ** 2 + x * 4 * density;
let dstPixel = y * 4 * img.width + x * 4;
for (let channel = 0; channel < 4; channel++) {
img.pixels[dstPixel + channel] = pixels[srcPixel + channel];
}
}
}
img.updatePixels();
// Draw picture in picture
let aspect = width / height;
image(img, 10, 10, 100, 100 / aspect, 0, 0, img.width, img.height);
push();
noFill();
strokeWeight(3);
rect(10, 10, 100, 100 / aspect);
pop();
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>
<body>
</body>
</html>我不知道p5.play是如何工作的，但我猜copy()命令(引用(会完成您想要的操作。要把最小地图放在最下面的角落，你可以这样做：
function draw() {
//whatever is currently in your draw loop...
let minimapWidth = 50;
let minimapHeight = 50;
copy(0, 0, width, height,
width-minimapWidth,
height-minimapHeight,
minimapWidth, minimapHeight
);
}