如何在 hdpi 屏幕上流畅地渲染 P5.js？

Question

hdpi屏幕的电脑越来越多，我也有一台
我正在构建一个带有 P5.js canvas inside 的网页，它填充 div。到目前为止我完全没有问题，但是因为我有一个 hdpi 屏幕，所以要渲染的像素数量很大，很难流畅地渲染。

我想做的事情：渲染低分辨率 canvas 并拉伸它以填充所有 space。但是我不知道 ideé 如何实现这个目标，即使有可能。

function setup() {
    var canvasDiv = document.getElementById('myCanvas');
    var divWidth = canvasDiv.getBoundingClientRect().width;
    var divHeight = canvasDiv.getBoundingClientRect().height;
    var sketchCanvas = createCanvas(divWidth,divHeight);
    sketchCanvas.parent("myCanvas");

    background(0)

   
}
function windowResized() {
   var canvasDiv = document.getElementById('myCanvas');
    var divWidth = canvasDiv.getBoundingClientRect().width;
    var divHeight = canvasDiv.getBoundingClientRect().height;
    resizeCanvas(divWidth, divHeight);

     background(0)
}



function draw(){
 
  
 
}

Answer 1

第一步：使用createGraphics()函数创建离屏缓冲区。更多信息可以在 the reference 中找到。给它任何你想要的低分辨率尺寸。

第二步：将场景绘制到屏幕外缓冲区。使用它的宽度和高度来绘制东西以进行缩放。

第三步：使用image()函数将离屏缓冲区绘制到屏幕上，该函数接受绘制大小的参数。使用 canvas 的大小作为参数。同样，可以在 the reference.

中找到更多信息

您仍将绘制相同数量的像素，但这就是您绘制到小缓冲区并调整其大小以匹配 canvas 大小的方式。

如果您仍然遇到问题，请 post 在新问题 post 中回答 MCVE，我们将从那里开始。祝你好运。

如何在 hdpi 屏幕上流畅地渲染 P5.js？

how to render smothly P5.js in hdpi screen?

javascript

processing

render

hdpi

p5.js