如何在HDPI屏幕中渲染P5.js

Question

带有hdpi屏幕的计算机越来越普遍，我有一个。
我正在构建一个网页，里面有一个 P5.js 画布填充一个div。到目前为止，我绝对没有问题，但是由于我有一个hdpi屏幕，要渲染的像素数量是巨大的，很难平滑地渲染。

我想做的是：渲染低分辨率画布并拉伸它以填充所有空间。 但是我不知道如何实现这一目标，甚至没有可能。

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() 函数创建屏幕外缓冲区。更多信息可以在参考中找到。给它你想要的任何低分辨率尺寸。

第二步：将场景绘制到屏幕外缓冲区。使用其宽度和高度来绘制要缩放的内容。

第三步：使用 image() 函数将屏幕外缓冲区绘制到屏幕上，该函数采用要绘制的大小的参数。使用画布的大小作为参数。同样，更多信息可以在参考中找到。

您

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

如果您仍然遇到问题，请在新的问题帖子中发布MCVE，我们将从那里开始。祝你好运。