有没有办法在保持像素大小的同时缩放p5js草图？

Question

我正在p5.js中的一个项目上进行工作，在那里我需要能够定义比我的浏览器窗口大得多的模糊画布大小。我本质上需要保持p5js像素大小（例如3840px，1920px），但可以看到整个画布。考虑一下如何在Photoshop中放大和缩小画布，这就是我要实现的功能。

就目前而言，使用默认浏览器功能进行放大和缩小是可以的，但并不理想，并且在按箭头键等操作时会引起其他一些错误。我在处理，p5和html canvas论坛中都看过，似乎无法找到我的确切情况。

Answer 1

有几种方法可以解决此问题。没有特别的顺序：

• 保持跟踪缩放倍增器。在您所有的图形代码中，对于坐标和尺寸，均使用此乘数。当用户滚动鼠标滚轮或执行其他操作时，请更改此倍数。
• 使用scale()函数更改整个画布的比例。
• 使用createGraphics()函数创建绘图缓冲区。该缓冲区的大小可以根据需要设置。将场景绘制到大缓冲区，然后将该缓冲区绘制到屏幕画布上。

尝试获得一些简单的方法，例如硬编码的圆形和正方形。然后，如果您遇到困难，可以将尝试过的内容发布到MCVE上。祝你好运。

Answer 2

我遇到了相反的问题，我需要在保持像素密度的同时将260 x 130的画布缩放到1080 by 720。我通过在setup()函数末尾添加以下内容来解决此问题：

 $("#defaultCanvas0").css({ 'height': "720px" });
 $("#defaultCanvas0").css({ 'width': "1080px" });

这意味着画布在保持较低分辨率的同时进行了放大。我发现通常的scale()函数对我不起作用。

我知道这不是您当时正在寻找的东西，但也许它将帮助将来其他任何正在关注这个问题的人...