如何在不损失分辨率的情况下缩小p5.js画布

Question

我的网站上有一个p5.js画布，包含在canvasDiv类中，我有一个脚本，它会转到网站并单击画布，然后下载它等。我如何缩小画布，使其不占用大部分屏幕，同时保持1000x1000px的分辨率？谢谢，祝你今天愉快！

HTML

<div id="canvasDiv">
<script src="sketch.js" id="astrum"></script>
<script src="functions.js"></script>
<script src="shapes.js"></script>
</div>

CSS

#canvasDiv {
display: block;
width: 1000px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
font-family: 'Source Code Pro', monospace;
}

JS

function setup() {
const myCanvas = createCanvas(1000, 1000);
myCanvas.parent('canvasDiv');
background(40);
angleMode(DEGREES);
rectMode(CENTER);
noStroke();
}

function mousePressed(){
if(mouseX > 0 && mouseX < width){
if(mouseY > 0 && mouseY < height){
save("AM.png");
}
}
}

Answer 1

使用create graphics并在画布上使用image((绘制到图形缓冲区。当你想让别人下载时，从图形缓冲区下载，而不是从画布下载。saveCanvas(selectedCanvas，[文件名]，[扩展名](

Answer 2

你也可以在后面有一个隐藏的画布，我认为css有一个属性：

#真实画布{隐藏：true}

然后，你可以在用户看到的第一个画布上缩小图像或任何东西，就像预览类型的东西一样，我想你也可以用createGraphics来做这件事。

这基本上与DavidWeiss的答案相同。