Question

带有hdpi屏幕的计算机越来越普遍，我拥有一台我正在构建一个网页，里面有一个填充div的P5.js画布。到目前为止我完全没有问题，但是由于我有一个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()功能创建一个屏幕外缓冲区。更多信息可以在the reference中找到。给它你想要的任何低分辨率。

第二步：将场景绘制到屏幕外缓冲区。使用它的宽度和高度来绘制比例。

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

您仍然会绘制相同数量的像素，但这就是您如何绘制到一个小缓冲区并调整其大小以匹配画布大小。

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

如何在hdpi屏幕中渲染smothly P5.js？

1 个答案: