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

Question

我正在 p5.js 中开发一个项目，我需要能够定义比我的浏览器窗口大得多的模糊 Canvas 尺寸。我本质上需要保持 p5js 像素大小(例如 3840px、1920px)，但可以看到整个 Canvas 。想想如何在 Photoshop 中放大和缩小 Canvas ，这就是我想要实现的功能。

目前，使用默认浏览器功能进行放大和缩小是可以的，但并不理想，并且会导致按箭头键等出现其他一些错误。我已经查看了整个处理、p5 和 html canvas 论坛，但似乎无法找到我的确切场景。

Answer 1

有几种方法可以解决这个问题。排名不分先后:

• 跟踪缩放倍数。在所有绘图代码中对于坐标和尺寸都使用此乘数。当用户滚动鼠标滚轮或执行其他操作时更改此乘数。
• 使用scale()函数更改整个 Canvas 的比例。
• 使用createGraphics()函数创建绘图缓冲区。这个缓冲区可以有你想要的大小。将场景绘制到大缓冲区，然后将该缓冲区绘制到屏幕 Canvas 上。

尝试让一些简单的东西工作，比如硬编码的圆形和正方形。然后如果你遇到困难，你可以发布MCVE与你所尝试过的。祝你好运。