如何在不丢失分辨率的情况下缩小 p5.js canvas

Question

我的网站上有一个 p5.js canvas，包含在 canvasDiv class 中，我有一个脚本可以转到该网站并单击 canvas，下载它等。如何缩小 canvas 使其不占用大部分屏幕，同时仍保持 1000x1000 像素的分辨率？谢谢，祝你有美好的一天！

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

在 canvas 上使用 create graphics and draw to the graphics buffer with image()。当你想让别人下载时，请从图形缓冲区而不是 canvas 下载。 saveCanvas(selectedCanvas, [文件名], [扩展名])

Answer 2

你也可以在后面隐藏一个 canvas，我认为 css 有一个属性:

#real-Canvas { 隐藏：真实 }

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

这与 DavidWeiss 的答案基本相同。

如何在不丢失分辨率的情况下缩小 p5.js canvas

How to scale down a p5.js canvas without losing resolution

html

javascript

css

p5.js