javascript - 如何在hdpi屏幕上平滑渲染P5js？

Question

hdpi屏幕的电脑越来越常见，我也拥有一台。
我正在构建一个网页，其中包含填充 div 的 P5.js Canvas 。 到目前为止我绝对没有问题，但由于我有一个 hdpi 屏幕，要渲染的像素数量巨大，而且很难平滑渲染。

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

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 大小的方式。

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